vue3+element Plus如何實現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁面功能
更新時間：2023年11月21日 10:28:12 作者：wyy愛學(xué)習(xí)
這篇文章主要介紹了vue3+element Plus如何實現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁面功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
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:是否可以通過點(diǎn)擊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也是一個遮罩層，所以沒有效果。
最終找到解決方法如下：
去掉.el-overlay-dialog的父級div的pointer-events事件。此時拖拽功能不可以使用，使用要給header、body、footer元素的事件加回來。
<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)彈框的拖拽、可點(diǎn)擊底層頁面功能的文章就介紹到這了,更多相關(guān)vue3 element plus彈框拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
這篇文章主要介紹了vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了解決echart在vue中id重復(fù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue+Ant Design進(jìn)行大數(shù)據(jù)量下拉框卡頓與表單提交優(yōu)化
在現(xiàn)代前端開發(fā)中,處理大數(shù)據(jù)量渲染和表單交互是常見的挑戰(zhàn),本文將探討如何優(yōu)化 Ant Design Vue 下拉框在大數(shù)據(jù)量情況下的性能問題,并解決表單提交后重復(fù)提示的問題,需要的可以了解下2025-03-03
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
Vuex Store 數(shù)據(jù)在頁面刷新后丟失的解決方法
當(dāng)我們使用 Vue.js 和 Vuex 進(jìn)行狀態(tài)管理時,一個常見的問題是頁面刷新會導(dǎo)致 Vuex store 中的數(shù)據(jù)丟失,本文將詳細(xì)介紹解決 Vuex Store 數(shù)據(jù)在頁面刷新后丟失的方法,感興趣的朋友一起看看吧2024-08-08
vue-cli創(chuàng)建項目及項目結(jié)構(gòu)解析
上一篇我們安裝了vue-cli，接下來我們就使用該腳手架進(jìn)行創(chuàng)建項目，這篇文章主要介紹了vue-cli創(chuàng)建項目以及項目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
登錄功能對于前端剛?cè)腴T不久的同學(xué)來說較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實現(xiàn)(含封裝axios)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue從倉庫state中取不到數(shù)據(jù)的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了淺談Vue 自動化部署打包上線，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06