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

这篇具有很好参考价值的文章主要介绍了Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：
elementui弹窗组件,Vue,vue.js,ui,javascript
我们只需要设置这两个属性 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">
          <el-input
            v-model="Params.name"
            placeholder="请输入单位名称"
            clearable
            size="small"
            @keyup.enter.native="handleQueryChoose"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQueryChoose"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryChoose"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
      <el-table v-loading="loadingChoose" :data="chooseList" @selection-change="handleSelectionChangeStandard">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="单位名称" align="center" prop="name"/>
        <el-table-column label="机构名称" align="center" prop="officeName"/>
      </el-table>
      <pagination
        v-show="totalchoose>0"
        :total="totalchoose"
        :page.sync="Params.pageNum"
        :limit.sync="Params.pageSize"
        @pagination="getChooseList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelChoose">取 消</el-button>
        <el-button type="primary" @click="submitFormChoose">确 定</el-button>
      </div>
    </el-dialog>

el-drawe设置

<el-drawer
  :title="titleName"
  :before-close="handleClose"
  v-model="drawer"
  direction="rtl"
  custom-class="demo-drawer"
  size="30%"
  :close-on-click-modal="false"
>
</el-dialog>