element-ui Dialog组件的close-on-click-modal属性

LinMeng 等级 829 0 0
标签: dialog前端

element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog,即点击空白处弹框可关闭。 单功能设置如下:

<el-dialog :close-on-click-modal="false" >    </el-dialog>

全局修改默认配置,点击空白处不能关闭弹窗:

//在组件注册.js文件中
Dialog.props.closeOnClickModal = false;  // 点击弹层不关闭
Dialog.props.closeOnPressEscape = false; // ESC键不关闭

常见问题: ** el-dialog中设置了destroy-on-close属性为true,dom依旧未被销毁**

  • 解决方法:
  1. 给el-dialog添加v-if属性
  2. 给el-dialog加一个动态唯一的key属性,,也可以重新渲染,直观上感觉应该是el-dialog本身是带有缓存功能的
收藏
评论区

相关推荐

element-ui Dialog组件的close-on-click-modal属性
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog,即点击空白处弹框可关闭。 单功能设置如下: <eldialog :closeonclickmodal"false" </eldialog 全局修改默认配置,点击空白处不能关闭弹窗: //在组件注册.js文件中 Dialog.props.cl
创建圆角Dialog风格的Activity
一、前言:在开发中有时我们需要用到dialog,可是系统提供的dialog有时不能满足我们的要求,比如显示位置等,不够灵活,我们这时可以创建activity,使其风格和dialog一样。二、实现 1\. 1.创建样式在res/values/styles.xml中<style name"DialogActivityStyle"
JBolt开发平台入门(14)
项目中,单表操作CURD,一个界面里,有增删改查的操作,有分页,有个Table显示数据,有按钮点击操作就行了。 **常见的样式:** ![常见样式](https://oscimg.oschina.net/oscnet/77df450476a512e6343cf793955c218e1f4.jpg) 除了单表操作管理,还有一些业务是主从表管理,一个主表对
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式 {$status?'正常':'错误'} {$info['status']?$info['msg']:$info['error']} 注意:三元运算符中暂时不支持点语法。 如下:            <div class="modal hide fade" id='myModa
Android DialogFragment(1)
**Android DialogFragment(1)** 和过去的AlertDialog类似,Android引入的DialogFragment旨在为开发者提供一个“富”dialog,而不必受到过去Android AlertDialog的局限。首先,DialogFragment是一个Fragment,它有Fragment的一切属性和生命周期,其次,
Android 经典笔记七 全局弹窗Dialog
##目录介绍 * 1.全局弹窗分析 * 2.全局弹窗必要条件 * 3.全局弹窗实现方式 3.1. 利用系统弹出dialog 3.2. 获取WindowManager,直接添加view 3.3. 在服务里,获取栈顶的Activity,弹窗 * 4.Dialog实现全局Loading加载框 4.1. 自定义Loading类 4.2. 给自定义的
Android 自定义对话框
public class CustomDilaog { private Context context; private Dialog dialog; public CustomDilaog(Context context) { this.conte
Android 设置Dalog大小
注意:设置Dialog大小的代码,必须放在setContentView代码后面。否则设置无效。   Dialog processDialog=new Dialog(this);   TextView txt = new TextView(this);   txt.setText("hello");   processDial
Android第四十五天
一、ProgressDialog(是一个含有进度条以及消息提示的对话框)         ProgressDialog的使用:                 1、创建对象; 1. `final ProgressDialog dialog = new ProgressDialog(MainActivity.this);`              
Android自定义Dialog多选对话框(Dialog+Listview+CheckBox)
先放效果截图 项目中需要有个Dialog全选对话框,点击全选全部选中,取消全选全部取消。下午查了些资料,重写了一下Dialog对话框。把代码放出来。 ![这里写图片描述](https://oscimg.oschina.net/oscnet/0231bb305ff838c957875702a8373cf7c26.gif) public class M
AngularJs 打开OA详细Dialog的实现
项目中点击列表打开相应详细页的实现: announcement.html * popup-oa-content="popup-oa-content" 指令  点击后打开新页面 该指令定义在directive.js中 <div class="oa-list oa-tab-body" popup-oa-content="popup-oa-con
DialogFragment内存泄露问题能不能一次性改好
孽缘 == 自DialogFragment在Android3.0之后作为一种特殊的Fragment引入,官方建议使用DialogFragment代替Dialog或者AllertDialog来实现弹框的功能,因为它可以更好的管理Dialog的生命周期以及可以更好复用。然而建议虽好,实用须谨慎,在开发的过程中我们只要接入LeakCanary则经常会收到Dial
EasyUI 关闭父窗口的modalDialog
这里使用的是easyui 创建一个**模式化的dialog扩展**方法。 [easyuiUtil.js](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fobq1lvsd9.bkt.clouddn.com%2FeasyuiUtil.js) * * * parent.$.mo
ElementUI dialog嵌套蒙层遮挡问题
dialog嵌套会有蒙层遮挡问题,我们加两个属性解决他 <el-dialog :close-on-click-modal="false" title="选择图片" custom-class="imgSelectDialog" :visible.sync="imgSelectDialog" @close="closeHandler" v-drag
Flutter 意见输入框
![](https://oscimg.oschina.net/oscnet/up-41f6087ad210009ad3110fc27ff0fb1d.png) Screenshot\_1612840493.png 要实现一个这样对话框。难点是什么? ##### 难点 自定义一个Widget 继承Dialog class SongSheetIn