欢迎光临
我的个人博客网站

element-ui修改dialog弹框事件,实现dialog背景模糊效果

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

先看效果图:

 

element-ui修改dialog弹框事件,实现dialog背景模糊效果

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实现,如果有其他棒的方法,希望可以分享学习下。

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » element-ui修改dialog弹框事件,实现dialog背景模糊效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏