elementplus如何实现dialog遮罩层外的元素可以被操作点击
element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一,它的效果是弹出一个对话框,外面默认会有一个蒙层。
现在我碰到的需求是,弹窗要正常显示,但是蒙层下面的元素内容又是可以点击的,如何实现呢?
以下是我的解决代码(vue)
首先是 HTML 部分
html
<div class="dialog">
<el-dialog
v-model="visible"
title="xxx"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<!-- content.... -->
</el-dialog>
</div>
然后是 css 代码
html
<style lang="scss" 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,否则上述修改是不生效的,一定要注意。
希望能帮到你。