vue-pc端elementui-统一修改问题-Dialog 对话框点击空白关闭问题-element-所有组件层级问题

前言

• 实际开发我们经常发现dialog弹出框默认点击遮罩层空白地方就会关闭-有属性可以关闭

• 但是经常会图方便-或者已经写完了，不想一个个写，可以在main.js进行统一关闭

• 当我们在页面进行复杂设计和层级关闭改变，会发现右上角的退出登录弹出款在我们页面之下

• 这是我们不管怎么修改这个组件，和行内样式的层级都没什么效果，这是我们可以在main.js统计进行层级改变

实现过程-main.js文件

1.修改dialog弹出框点击遮罩层关闭弹框-统一处理

// 默认点击背景不关闭弹窗
import ElementUI from 'element-ui'
ElementUI.Dialog.props.closeOnClickModal.default = false

2.修改element-ui所有组件的层级关系

Vue.use(Element, {
  zIndex: 99999 
})

​

---

总结：

经过这一趟流程下来相信你也对 vue-pc端elementui-统一修改问题 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕