vue+elementui进行弹出框dialog的锁定操作

ElementUI+Vue在使用el-dialog时,在弹出dialog时,点击框框以外的空白部分就直接给关闭了。
最近在用vue一个pc端的项目 大体上做的还是可以的, 但是有一些小问题 , 例如本次发现的点击弹出框以外的部分就会将弹出框自动关闭, 去百度了以后发现vue不是很方便, 所以去查了别人的csdn, 得到相关解决方法以后, 去elementUI的官网去查了一下, 发现还是蛮简单的,
现在开始, 这种弹出框其实是有两种方法去控制的, 只是加两个属性的问题, 在官网都是可以查到的
总结属性
1 before-close 关闭前的回调,会暂停 Dialog 的关闭 function(done),done 用于关闭 Dialog
官网的解释
*具体代码位置: *dialog位置的写法
在这里插入图片描述
methods位置的写法:
vue+elementui进行弹出框dialog的锁定操作_第1张图片
展示效果:
vue+elementui进行弹出框dialog的锁定操作_第2张图片
会弹出一个提示框 提示是否关闭

2 close-on-click-modal 是否可以通过点击 modal 关闭 Dialog boolean
官网的解释是点击空白是否关闭, 这个就简单了,
vue+elementui进行弹出框dialog的锁定操作_第3张图片
没有花里胡哨, 只有实打实的效果,
代码部分
在这里插入图片描述
只需要在dialog中加入本属性, 设置值为false即可,
效果:
vue+elementui进行弹出框dialog的锁定操作_第4张图片
此时你就会发现旁边的空白部分点击是没有什么效果的
总结: 以上两种方法都是可以实现需求的, 只是第一种比较更加直观一点, 个人比较喜欢第一种,
// 新手小白上路,防止遗忘, 所以做了个人笔记,望大佬们勿喷.

你可能感兴趣的:(vue+elementui进行弹出框dialog的锁定操作)