el-dialog取消遮罩层，支持拖拽，底部内容可操作

最新推荐文章于 2025-05-23 10:25:29 发布

原创最新推荐文章于 2025-05-23 10:25:29 发布 · 984 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

 <el-dialog v-model="dialogVisible" title="XXX" width="300" @close="closeFn"
 :modal="false" :close-on-click-modal="false"  draggable style="padding:0;" 
   modal-class="my-dialog-class">

1、在 el-dialog 上绑定这几个属性：

:modal="false"

:close-on-click-modal="false"

draggable

modal-class="my-dialog-class"

2、在 CSS 里写这两个样式：

:deep(.my-dialog-class) {
    /* 使遮罩层不响应鼠标事件 */
    pointer-events: none;

    .el-dialog {
        /* 使对话框内容响应鼠标事件 */
        pointer-events: auto;
    }
}

操作好上面两步，应该就实现功能啦~

注意：样式的 my-dialog-class需要与属性 modal-class绑定的值保持一致....