vueelment notification全局禁止点击遮罩层关闭
时间: 2023-09-01 07:04:25 浏览: 106
在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)
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)