解決VUE的對(duì)話框el-dialog點(diǎn)擊外部消失問(wèn)題
vue對(duì)話框el-dialog點(diǎn)擊外部消失
我們?cè)陂_(kāi)發(fā)vue頁(yè)面的時(shí)候，經(jīng)常會(huì)需要用到一些el-dialog對(duì)話框的場(chǎng)景。
比如新增功能、修改詳情、上傳或下載附件等，在原父頁(yè)面點(diǎn)擊功能按鈕彈出對(duì)應(yīng)對(duì)話框，一般在操作完之后我們才會(huì)去點(diǎn)擊關(guān)閉或取消按鈕，以關(guān)閉對(duì)話框。
然而，有個(gè)問(wèn)題是我們?cè)趀l-dialog界面操作或編輯時(shí)，不小心鼠標(biāo)點(diǎn)擊了外部空白處時(shí)，沒(méi)有點(diǎn)擊關(guān)閉按鈕就發(fā)現(xiàn)對(duì)話框消失了！
導(dǎo)致編輯或修改的信息中途就中斷了，如何解決？
背景
element組件庫(kù)的Dialog對(duì)話框默認(rèn)可以通過(guò)點(diǎn)擊 modal 關(guān)閉 Dialog，即點(diǎn)擊空白處彈框可關(guān)閉。
屬性
解決
解決這個(gè)問(wèn)題也很簡(jiǎn)單，只需要一行代碼即可。
在<el-dialog 的定義處添加如下一行代碼：
:close-on-click-modal="false"
只需要添加上述一行代碼
即設(shè)置該對(duì)話框的上述屬性值為false
點(diǎn)擊空白處不消失
vue el-dialog點(diǎn)擊空白不關(guān)閉
單個(gè)控制
<el-dialog :close-on-click-modal="false"> </el-dialog>
全局控制
在main.js中添加
import Element from 'element-ui' //全局修改默認(rèn)配置，點(diǎn)擊空白處不能關(guān)閉彈窗 //一般只需要寫入下面這句話就可以,引入是默認(rèn)帶的 Element.Dialog.props.closeOnClickModal.default = false Vue.use(Element)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
今天小編就為大家分享一篇在Vue mounted方法中使用data變量詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
最近遇到這樣的需求點(diǎn)擊某一個(gè)節(jié)點(diǎn)，彈窗，直接定位到點(diǎn)擊的節(jié)點(diǎn)，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)?lái)了vue table直接定位到指定元素的操作代碼,需要的朋友可以參考下2022-11-11
vue打包后,用后端接口報(bào)錯(cuò)304、404問(wèn)題
這篇文章主要介紹了vue打包后,用后端接口報(bào)錯(cuò)304、404問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
利用vue和element-ui設(shè)置表格內(nèi)容分頁(yè)的實(shí)例
下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁(yè)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中的input框點(diǎn)擊后不聚焦問(wèn)題
這篇文章主要介紹了vue中的input框點(diǎn)擊后不聚焦問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中使用sass實(shí)現(xiàn)換膚功能，實(shí)現(xiàn)此功能用到了三個(gè)主要文件（base.scss、mixin.scss、varibale.scss）,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案
這篇文章主要介紹了當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04