一、修改源代码
在el-dialog源代码中，我们可以找到click-outside事件的监听函数。
点击弹窗外面的区域弹窗消失，因此，我们可以在监听函数中添加一个判断条件，如果点击了弹窗内部的区域，则不关闭弹窗。
function handleWrapperClick() {
if (this.closeOnClickModal && !this.closeOnPressEscape) {
this.close();
}
}
我们可以修改为：
function handleWrapperClick(evt) {
const isClickInsideDialog = evt.target.closest('.el-dialog');
if (this.closeOnClickModal && !this.closeOnPressEscape && !isClickInsideDialog) {
this.close();
}
}
这样就可以防止因为点击弹窗内部区域而误关闭弹窗了。
二、增加遮罩层
在el-dialog组件中，遮罩层是在弹窗后层上的蒙版，一般默认情况下，点击遮罩层可以关闭弹窗。如果希望防止因为误触遮罩层而关闭弹窗，则可以在组件中增加配置。
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false">
<span slot="title">这是标题</span>
<p>这是内容</p>
</el-dialog>
在这里，我们将close-on-click-modal设置为false，这样点击遮罩层就不会关闭弹窗了。
三、手动关闭
除了修改源代码和增加遮罩层之外，我们也可以在代码中手动关闭弹窗，这样就可以避免误触而关闭了弹窗。比如，我们可以绑定一个方法到弹窗上面的关闭按钮上。
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false">
<span slot="title">这是标题</span>
<p>这是内容</p>
<div slot="footer">
<el-button @click="closeDialog">关闭</el-button>
</div>
</el-dialog>
methods: {
closeDialog() {
this.dialogVisible = false;
}
}
这样就可以通过手动关闭的方式来防止误触关闭弹窗了。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182437.html
微信扫一扫 
支付宝扫一扫 