全局设置element-ui Dialog组件的close-on-click-modal属性为false

最新推荐文章于 2024-06-13 10:32:49 发布

倔强的小绵羊

最新推荐文章于 2024-06-13 10:32:49 发布

阅读量4.8w

点赞数 22

CC 4.0 BY-SA版权

分类专栏： vue Element 前端文章标签： element dialog

本文链接：https://blog.youkuaiyun.com/lhz_333/article/details/102681826

前端同时被 3 个专栏收录

31 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

Element

2 篇文章

订阅专栏

本文详细介绍了Element UI中Dialog对话框组件的使用方法，特别是如何通过close-on-click-modal属性控制点击空白区域是否关闭弹窗的功能。通过示例代码展示了全局配置的方法，帮助开发者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。

属性

可通过close-on-click-modal属性值来控制，实例如下：

全局配置

修改配置前：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 默认主题

//全局修改默认配置，点击空白处不能关闭弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false
console.log(ElementUI.Dialog)
Vue.use(ElementUI)

修改配置后：