发布于:,更新于:

el-dialog设置点击空白处不自动关闭

要阻止 <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 键来关闭对话框。如果你想禁止这些方式关闭对话框,可以进一步调整相关的属性和事件处理。