要阻止 <el-dialog>
在点击空白处时自动关闭,可以使用 :close-on-click-modal="false"
属性。
<template>
<div>
<el-dialog
:visible="dialogVisible"
:close-on-click-modal="false"
@close="closeDialog"
>
<!-- 对话框内容 -->
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
closeDialog() {
this.dialogVisible = false;
}
}
};
</script>
在上述示例中,我们通过将 :close-on-click-modal="false"
应用于 <el-dialog>
组件来禁止点击空白处时自动关闭对话框。这样,无论用户点击对话框外的区域,对话框都不会关闭。
你可以根据你的实际情况修改示例代码中的其他部分。dialogVisible
数据属性用于控制对话框的显示与隐藏,showDialog
方法用于打开对话框,closeDialog
方法用于关闭对话框。
请注意,除了点击空白处关闭对话框,用户还可以通过点击右上角的关闭按钮或按下 Esc 键来关闭对话框。如果你想禁止这些方式关闭对话框,可以进一步调整相关的属性和事件处理。
文章链接
https://www.cayzlh.com/post/20230719/