?1、template部分
<el-dialog
:modal="false"
v-model="dialogVisible"
title=""
width="30%"
draggable
:close-on-click-modal="false"
class="message-dialog"
>
</el-dialog>必須加的屬性
? ? ? ? modal:是否去掉遮罩層
? ? ? ? close-on-click-modal:是否可以通過點擊modal關(guān)閉Dialog
? ? ? ? draggable:開啟拖拽功能
2、css部分
網(wǎng)上查找的資料，css需要修改pointer-events,主要的作用是設(shè)置元素是否對鼠標(biāo)事件做出反應(yīng)
<style lang="less" scoped>
.el-dialog__wrapper{
pointer-events:none;
/deep/ .el-dialog{
pointer-events:auto;
}
}
</style>?
因為?.el-overlay-dialog的父級div也是一個遮罩層，所以沒有效果。
最終找到解決方法如下：文章來源：http://www.zghlxwxcb.cn/news/detail-744523.html
去掉.el-overlay-dialog的父級div的pointer-events事件。此時拖拽功能不可以使用，使用要給header、body、footer元素的事件加回來。文章來源地址http://www.zghlxwxcb.cn/news/detail-744523.html
<style lang="scss">
.message-dialog {
.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
pointer-events: auto !important;
}
}
:has(> .el-overlay-dialog .message-dialog) {
pointer-events: none !important;
}
</style>到了這里，關(guān)于vue3+element Plus實現(xiàn)彈框的拖拽、可點擊底層頁面功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
