Vue项目中修改 element-ui 的dialog弹框事件，实现dialog背景模糊效果

先看效果图：

一、需求

当点击出现dialog弹框时，背景模糊处理。

二、实现

实现的思路是，修改dialog弹出事件和关闭事件，在这两个事件里面给我的背景添加模糊处理和去除模糊。

说明：我的是全局修改，即所有的dialog都会受到影响。需要部分修改的根据情况做局部处理。

1、先在全局公共的css中添加一个模糊处理的样式，如下代码：2、我的element是按需引入，在引入的文件修改Dialog的弹出和关闭事件。如下代码： 

// 模糊处理的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)

注：如果dialog上用了v-if会导致此功能失效

实现的逻辑在上面的代码里已经说明了，应该还有其他css实现，如果有其他棒的方法，希望可以分享学习下。