vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能
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:是否可以通過(guò)點(diǎn)擊modal關(guān)閉Dialog
draggable:開啟拖拽功能
2、css部分
網(wǎng)上查找的資料，css需要修改pointer-events,主要的作用是設(shè)置元素是否對(duì)鼠標(biāo)事件做出反應(yīng)
<style lang="less" scoped>
.el-dialog__wrapper{
pointer-events:none;
/deep/ .el-dialog{
pointer-events:auto;
}
}
</style>
因?yàn)?nbsp;.el-overlay-dialog的父級(jí)div也是一個(gè)遮罩層，所以沒有效果。
最終找到解決方法如下：
去掉.el-overlay-dialog的父級(jí)div的pointer-events事件。此時(shí)拖拽功能不可以使用，使用要給header、body、footer元素的事件加回來(lái)。
<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如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能的文章就介紹到這了,更多相關(guān)vue3 element plus彈框拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue.js相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面通過(guò)本文給大家分享vue.js語(yǔ)法及常用指令，希望對(duì)大家有所幫助2017-10-10
Vue狀態(tài)模式實(shí)現(xiàn)窗口?？抗δ?靈動(dòng)、自由, 管理后臺(tái)Admin界面)
這篇文章主要介紹了Vue狀態(tài)模式實(shí)現(xiàn)窗口?？抗δ?靈動(dòng)、自由, 管理后臺(tái)Admin界面),本文通過(guò)實(shí)例代碼文字說(shuō)明給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對(duì)中文文件名的支持不完善,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
本文給大家介紹Vue中插槽(Slot)用法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-10-10
ts+vue3.0聲明響應(yīng)式對(duì)象的實(shí)現(xiàn)方式
這篇文章主要介紹了ts+vue3.0聲明響應(yīng)式對(duì)象的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)
這篇文章主要介紹了開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于Vue3實(shí)現(xiàn)點(diǎn)擊Tab平滑滾動(dòng)并吸頂效果的完整代碼
在現(xiàn)代 Web 應(yīng)用開發(fā)中,良好的用戶體驗(yàn)至關(guān)重要,本文將深入剖析一個(gè)常見的交互需求：點(diǎn)擊頁(yè)面 Tab 欄時(shí),頁(yè)面平滑滾動(dòng)至該 Tab 區(qū)域,并使其吸附在頂部導(dǎo)航欄下方的效果,需要的朋友可以參考下2026-02-02
vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例
這篇文章主要介紹了vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例,本文目的在于記錄自己項(xiàng)目框架搭建的過(guò)程,通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
使用vue-element-admin框架調(diào)用后端接口及跨域的問題
這篇文章主要介紹了使用vue-element-admin框架調(diào)用后端接口及跨域的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11