标签：el Dialog 弹框 dialog 点击 modal 组件 close click

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

标签：el,Dialog,弹框,dialog,点击,modal,组件,close,click
来源： https://www.cnblogs.com/lhongsen/p/16409998.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。