1、设置dialogde
elementUi在对Dialog组件做初始化的时候,默认让该Dialog在点击组件以外区域会导致该组件关闭,
Dialog下有个‘close-on-click-modal’属性,该属性默认值为‘True’,作用为:是否可以通过点击 modal 关闭 Dialog。
所以,通过设置Dialog下的close-on-click-modal属性为‘false’,即可解决该问题。
:close-on-click-modal ="false"
2、完整示例代码
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" :close-on-click-modal ="false">
<!-- 内容主体区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
感谢赏阅
参考:
https://blog.csdn.net/m0_51830650/article/details/124698738