elementui $message 全局时间
时间: 2023-08-24 20:03:56 浏览: 87
默认情况下,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 对象时进行设置。
相关问题
elementUI中的如何调节速度that.$message
在 ElementUI 中,可以通过修改全局配置来调节 Message 组件的速度。具体做法如下:
1. 首先,在 main.js 文件中引入 ElementUI:
```
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
2. 然后,可以通过配置全局 Message 组件的 duration 参数来调节速度。duration 表示消息框显示时间(毫秒),默认值为 3000 毫秒(3 秒)。例如,将 duration 设置为 1000 毫秒(1 秒):
```
Vue.prototype.$message({
message: '这是一条消息',
type: 'success',
duration: 1000
})
```
这样就可以让 Message 组件在显示时更快地消失。需要注意的是,Message 组件的速度与动画效果也与 CSS 样式有关,可以通过自定义 CSS 样式来调节。
vueelment notification全局禁止点击遮罩层关闭
在Vue Element Notification中,如果想要全局禁止点击遮罩层关闭的话,可以通过以下步骤实现。
首先,在`main.js`中引入vue和vue-element-ui:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
然后,在项目根目录下创建一个新的Vue组件,例如`Notification.vue`,代码如下:
```html
<template>
<el-notification
:title="title"
:message="message"
:type="type"
:duration="duration">
</el-notification>
</template>
<script>
export default {
data() {
return {
title: '',
message: '',
type: '',
duration: 3000
}
}
}
</script>
```
接着,在`main.js`中注册全局组件:
```javascript
import Vue from 'vue'
import Notification from './Notification.vue'
// 注册全局组件
Vue.component('Notification', Notification)
```
现在,在项目中的任何一个组件中,都可以使用`Notification`组件了。如下所示:
```html
<template>
<div>
<Notification
:title="'Notification Title'"
:message="'Notification Message'"
:type="'success'"
:duration="5000">
</Notification>
</div>
</template>
```
这样就可以在任何一个组件中使用全局的`Notification`组件来展示通知信息了。由于这个组件是全局的,所以无论是否点击遮罩层它都不会关闭。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)