Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭

最新推荐文章于 2024-09-24 16:55:00 发布

金蕊泛流霞

最新推荐文章于 2024-09-24 16:55:00 发布

阅读量4k

点赞数 1

分类专栏： Vue 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/songyinyi/article/details/127055245

版权

本文介绍了如何在Vue项目中使用Element-UI的el-dialog和el-drawer组件，通过设置'append-to-body'和':close-on-click-modal="false"'属性，来阻止用户点击遮罩层关闭弹窗。详细内容包括el-dialog和el-drawer的配置方法。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
我们只需要设置这两个属性 append-to-body :close-on-click-modal=“false”

el-dialog 设置

    <!-- 审计单位选择对话框 -->
    <el-dialog title="选择审计单位" :visible.sync="openChoose" width="650px" append-to-body  :close-on-click-modal="false">
      <el-form
        :model="Params"
        ref="queryParamsForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="单位名称" prop="name"