message duration
时间: 2024-02-06 12:05:38 浏览: 15
message duration是指在使用Element UI框架中的Message组件时,消息提示框显示的时间长度。在引用中提供了两种方法来配置message duration,一种是直接在代码中配置duration,另一种是通过修改全局的$message方法来设置不同类型消息提示框的duration。其中,duration的单位为毫秒,1500毫秒即为1.5秒。
相关问题
elementui $message 全局时间
默认情况下,ElementUI 的 $message 全局提示框会在 3 秒后自动消失。这个时间是可以通过在调用 $message 方法时传入一个 options 对象来进行自定义的。
例如,可以通过设置 duration 属性来改变提示框消失的时间,代码如下:
```javascript
this.$message({
message: '提示信息',
type: 'success',
duration: 5000 // 5秒后自动消失
});
```
另外,ElementUI 还提供了一个全局的配置对象,可以通过修改该对象来改变全局提示框的默认配置,例如:
```javascript
import Vue from 'vue';
import { Message } from 'element-ui';
Vue.prototype.$message = Message;
// 修改全局配置
Message.config({
duration: 5000, // 5秒后自动消失
showClose: true, // 显示关闭按钮
center: true, // 居中显示
});
```
这样,在后续调用 $message 方法时,就会继承全局配置的属性。如果特定的 $message 调用需要覆盖全局配置,也可以在传入 options 对象时进行设置。
export default { // 插件中,必须包含一个install方法 install: function (Vue) { //注入组件选项 Vue.mixin({ methods: { //get方法 $get(url, params) { return get(url, params); }, //post方法 $post(url, params) { return post(url, params); }, $put(url, params) { return put(url, params); }, $del(url, params) { return del(url, params) }, $msg(message, type, duration = 2000) { this.$message({ message: message, type: type, duration: duration, showClose: true }); }, $notifyMsg(title, message, type, duration = 2500) { this.$notify({ title: title, message: message, type: type, duration: duration })
这段代码定义了一个Vue插件,包含一个install方法和一些方法。安装插件后,这些方法会成为Vue实例的全局方法,可以在任何Vue组件中使用。
具体来说,install方法接收一个Vue构造函数作为参数,在方法内部使用Vue.mixin()方法将一些方法注入到Vue组件中。这些方法包括:
- $get(url, params):发起GET请求的方法,返回一个Promise对象;
- $post(url, params):发起POST请求的方法,返回一个Promise对象;
- $put(url, params):发起PUT请求的方法,返回一个Promise对象;
- $del(url, params):发起DELETE请求的方法,返回一个Promise对象;
- $msg(message, type, duration):显示消息弹窗的方法,使用Element UI库的$message方法;
- $notifyMsg(title, message, type, duration):显示通知消息的方法,使用Element UI库的$notify方法。
这些方法可以在Vue组件中通过this.$get()、this.$post()等方式调用。由于已经注册为全局方法,因此可以在任何Vue组件中使用,而不需要在每个组件中单独导入这些方法。