element-ui修改dialog彈框事件，實現dialog背景模糊效果

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)

 

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

實現的邏輯在上面的代碼里已經說明了，應該還有其他css實現，如果有其他棒的方法，希望可以分享學習下。