自己做购物网站推广,网络营销的特征和功能,免费模板下载ppt,网站备案类型及条件elementplus如何实现dialog遮罩层外的元素可以被操作点击 element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一#xff0c;它的效果是弹出一个对话框#xff0c;外面默认会有一个蒙层。
现在我碰到的需求是#xff0c;弹窗要正常显示#xff0c;但是蒙层下… elementplus如何实现dialog遮罩层外的元素可以被操作点击 element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一它的效果是弹出一个对话框外面默认会有一个蒙层。
现在我碰到的需求是弹窗要正常显示但是蒙层下面的元素内容又是可以点击的如何实现呢
以下是我的解决代码vue
首先是 HTML 部分
div classdialogel-dialogv-modelvisibletitlexxx:close-on-click-modalfalse:close-on-press-escapefalse!-- content.... --/el-dialog
/div然后是 css 代码
style langscss scoped
.itrImgDialog {:deep(.el-overlay) {background-color: transparent;pointer-events: none;}:deep(.el-dialog) {pointer-events: auto;}
}
/style来解释一下
要实现蒙层外面的内容可以点击被操作核心是用到了pointer-events; 这个属性用于控制元素是否能成为鼠标事件的目标。 常见的两个值 auto这是默认值。元素可以响应鼠标事件。 none元素不会成为鼠标事件的目标。即鼠标事件会“穿透”这个元素作用在元素下方的其他元素上。
所以我们把 el-overlay 设置为 pointer-events: none; 但是为了要保证 dialog 本身能够点击所以将 el-dialog 设置为 pointer-events: auto;
值得注意的是el-dialog 的 mask 属性不要设置成 false否则上述修改是不生效的一定要注意。
希望能帮到你。
