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

关于element-ui弹窗组件el-dialog,阻止点击遮罩层关闭的问题,以及全局处理和局部处理的方法

前言

在使用element-ui的组件时,有时候根据项目需求,需要修改组件默认的属性值。我们公司项目的需要在el-dialog弹窗组件中写入表单数据,由于表单数据比较多,有时候误触了el-dialog的遮罩层就关闭弹窗了,导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。


下面针对使用npm安装使用element-ui

1. 全局配置

npm引入,直接在main.js文件中写入如下代码

import Element from 'element-ui'
import './assets/styles/element-variables.scss'
// 修改 el-dialog 默认点击遮照不关闭
Element.Dialog.props.closeOnClickModal.default = false;

这里只是针对el-dialog弹窗组件进行了配置。如果想要配置其他组件不知道如何配置的话,可以在main.js中通过console.info(Element.Dialog)打印一下

2. 局部配置
通过给el-dialog 弹窗添加close-on-click-modal属性,属性值改为 false 可以禁止点击遮罩关闭弹窗(默认是true)

  <el-dialog
    :title="title"
    :visible.sync="open"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
  ></el-dialog>

注意:这里的close-on-click-modal属性前需要写入


全局配置也可以修改其他组件的默认值,区别在于默认值的格式不一样,不清楚的时候可以通过console.info查看。

  • 12
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值