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