elementplus如何实现dialog遮罩层外的元素可以被操作点击

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,否则上述修改是不生效的,一定要注意。

希望能帮到你。

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
天天进步20159 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz10 小时前
游戏引擎学习第20天
前端·学习·游戏引擎