快捷導(dǎo)航

vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能

更新時(shí)間：2023年11月21日 10:28:12 作者：wyy愛(ài)學(xué)習(xí)

這篇文章主要介紹了vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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:開(kāi)啟拖拽功能

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è)遮罩層，所以沒(méi)有效果。

最終找到解決方法如下：

去掉.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)文章

vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
這篇文章主要介紹了vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue.js實(shí)現(xiàn)簡(jiǎn)易折疊面板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
解決echart在vue中id重復(fù)問(wèn)題
這篇文章主要介紹了解決echart在vue中id重復(fù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue+Ant Design進(jìn)行大數(shù)據(jù)量下拉框卡頓與表單提交優(yōu)化
在現(xiàn)代前端開(kāi)發(fā)中,處理大數(shù)據(jù)量渲染和表單交互是常見(jiàn)的挑戰(zhàn),本文將探討如何優(yōu)化 Ant Design Vue 下拉框在大數(shù)據(jù)量情況下的性能問(wèn)題,并解決表單提交后重復(fù)提示的問(wèn)題,需要的可以了解下
2025-03-03
vue 中命名視圖的用法實(shí)例詳解
這篇文章主要介紹了vue 中命名視圖的用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-08-08
Vuex Store 數(shù)據(jù)在頁(yè)面刷新后丟失的解決方法
當(dāng)我們使用 Vue.js 和 Vuex 進(jìn)行狀態(tài)管理時(shí),一個(gè)常見(jiàn)的問(wèn)題是頁(yè)面刷新會(huì)導(dǎo)致 Vuex store 中的數(shù)據(jù)丟失,本文將詳細(xì)介紹解決 Vuex Store 數(shù)據(jù)在頁(yè)面刷新后丟失的方法,感興趣的朋友一起看看吧
2024-08-08
vue-cli創(chuàng)建項(xiàng)目及項(xiàng)目結(jié)構(gòu)解析
上一篇我們安裝了vue-cli，接下來(lái)我們就使用該腳手架進(jìn)行創(chuàng)建項(xiàng)目，這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目以及項(xiàng)目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容
2021-10-10
Vue登錄功能實(shí)現(xiàn)全套詳解(含封裝axios)
登錄功能對(duì)于前端剛?cè)腴T(mén)不久的同學(xué)來(lái)說(shuō)較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實(shí)現(xiàn)(含封裝axios)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
vue從倉(cāng)庫(kù)state中取不到數(shù)據(jù)的問(wèn)題
這篇文章主要介紹了vue從倉(cāng)庫(kù)state中取不到數(shù)據(jù)的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺談Vue 自動(dòng)化部署打包上線
這篇文章主要介紹了淺談Vue 自動(dòng)化部署打包上線，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06