ElementUI+Vue在使用el-dialog時，如何做到在彈出dialog時，外部呈鎖定狀態，而不是點擊外部導致dialog直接關閉。

問題描述

今天，在做Element+Vue項目時發現：Dialog打開狀態下，點擊該Dialog以外的區域會導致該Dialog關閉；正確的狀態應該是只有在點擊關閉按鈕，或者是Dialog內的其他操作性按鈕才能使得Dialog的狀態變為關閉。

問題分析

如果用vue的邏輯，可能需要做導航守衛什么的，顯得很復雜，其實：

elementUi在對Dialog組件做初始化的時候，默認讓該Dialog在點擊組件以外區域會導致該組件關閉，所以elementUI 一定會將該屬性暴露出來讓開發人員進行配置。
通過查詢ElementUI的官方文檔，發現在Dialog下有個‘close-on-click-modal’屬性，該屬性默認值為‘True’，作用為：是否可以通過點擊 modal 關閉 Dialog。
所以，通過設置Dialog下的close-on-click-modal屬性為‘false’，即可解決該問題。

問題解決方式

• 解決方式一 ： 將Dialog下的close-on-click-modal屬性改為‘false’。
  • 需要注意的是： 在使用close-on-click-modal屬性時，必須在該屬性前加“:”。
• 解決方式二： 可以通過before-close屬性，在Dialog關閉時，讓用戶進行確認是否需要關閉。
  • before-close 僅當用戶通過點擊關閉圖標或遮罩關閉 Dialog 時起效。如果你在 footer 具名 slot 里添加了用於關閉 Dialog 的按鈕，那么可以在按鈕的點擊回調函數里加入 before-close 的相關邏輯。

代碼實踐

• 解決方式一：

<el-button type="text" @click="dialogVisible = true">點擊打開 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false'> <span>這是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">確 定</el-button> </span> </el-dialog> <script> export default { data() { return { dialogVisible: false }; } }; </script>

 

• 解決方式二：

<el-button type="text" @click="dialogVisible = true">點擊打開 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>這是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">確 定</el-button> </span> </el-dialog> <script> export default { data() { return { dialogVisible: false }; }, methods: { handleClose(done) { this.$confirm('確認關閉？') .then(_ => { done(); }) .catch(_ => {}); } } }; </script>