ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭。
时间:2019-09-26
本文章向大家介绍ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭。,主要包括ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭。使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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>
原文地址:https://www.cnblogs.com/fxwoniu/p/11594535.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python实战之利用数据字典实现井字棋盘,
- scRNA-seq Clustering quality control
- Python实战之tkinter库画图,用canver画布教你画卡通人物!
- Python教程之正则表达式(基础篇)
- Python教程之正则表达式(提高篇)
- 【剑指Offer】树的子结构
- 【剑指Offer】合并两个排序的链表
- Python实战之特定文本提取,挑战高效办公的第一步
- 【剑指Offer】调整数组顺序使奇数位于偶数前面
- 【剑指Offer】链表中倒数第 k 个节点
- 【剑指Offer】调整数组顺序使奇数位于偶数前面
- 【剑指Offer】复杂链表的复制
- 【剑指Offer】二叉树中和为某一值的路径
- 【剑指Offer】二叉搜索树的后序遍历序列
- 【剑指Offer】Ⅲ. 从上到下打印二叉树