- A+
所属分类：Web前端
Vue项目中修改 element-ui 的dialog弹框事件，实现dialog背景模糊效果
先看效果图：
一、需求
当点击出现dialog弹框时，背景模糊处理。
二、实现
实现的思路是，修改dialog弹出事件和关闭事件，在这两个事件里面给我的背景添加模糊处理和去除模糊。
说明：我的是全局修改，即所有的dialog都会受到影响。需要部分修改的根据情况做局部处理。
1、先在全局公共的css中添加一个模糊处理的样式，如下代码：
// 模糊处理的css .allblur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); zoom: 1; } // v-modal修改的弹出框是背景颜色的 .v-modal { background-color: rgba(0,0,0,0.3) !important; }
2、我的element是按需引入，在引入的文件修改Dialog的弹出和关闭事件。如下代码：
import Vue from 'vue' import { Form, Input, Checkbox, ... ... Dialog } // 截取dialog打开方法 const afterEnter = function() { // 在body上加入classname为allblur,即实现背景模糊 document.getElementById('app').className = 'allblur' // 下面是原有的代码，不做修改 this.$emit('opened') } Dialog.methods.afterEnter = afterEnter // 截取dialog关闭方法 const afterLeave = function() { // 去掉body上添加的classname，即实现去除背景模糊 document.getElementById('app').className = '' // 下面是原有的代码，不做修改 this.$emit('closed') } Dialog.methods.afterLeave = afterLeave const element = { install: function() { Vue.use(Input) Vue.use(Form) Vue.use(Checkbox) ... ... Vue.use(Dialog) } } export default element
3、在main.js中引入此文件即可
import Vue from 'vue' // 按需引入 element-ui组件 import 'element-ui/lib/theme-chalk/index.css' import element from './element/index.js' Vue.use(element)
实现的逻辑在上面的代码里已经说明了，应该还有其他css实现，如果有其他棒的方法，希望可以分享学习下。
