当前位置:首页 > 技术分析 > 正文内容

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

ruisui882个月前 (02-27)技术分析18

Element Plus 的 Dialog 组件默认情况下,点击遮罩层(即背景蒙版)会关闭对话框。然而,你可以通过修改组件的 close-on-click-modal 属性来改变这个行为。

如果你想要实现点击遮罩层不关闭 Dialog,你需要将 close-on-click-modal 属性设置为 false。这可以在组件的局部设置中进行,也可以全局配置。

局部设置

在 Dialog 组件的模板中,直接添加 :close-on-click-modal="false":

  
    

全局配置

如果你希望所有 Dialog 组件都默认拥有这个行为,你可以通过全局配置来实现。在 Vue 应用的入口文件(通常是 main.js 或 main.ts)中,配置 Element Plus 并修改 ElDialog 组件的默认属性:

import { createApp } from 'vue';  
import ElementPlus from 'element-plus';  
import 'element-plus/lib/theme-chalk/index.css';  
import App from './App.vue';  
  
const app = createApp(App);  
  
app.use(ElementPlus);  
  
// 全局配置 Dialog 组件,使得点击遮罩层不关闭弹窗  
app.config.globalProperties.$ELEMENT = {  
  size: 'small', // 其他全局配置...  
  zIndex: 3000 // 其他全局配置...  
};  
  
// 修改 ElDialog 组件的 closeOnClickModal 属性的默认值  
app._context.components.ElDialog.props.closeOnClickModal.default = false;  
  
app.mount('#app');

请注意,直接修改
app._context.components.ElDialog.props.closeOnClickModal.default
并不是官方推荐的做法,因为这涉及到对 Vue 内部状态的直接操作,未来 Vue 或 Element Plus 的更新可能会导致此方法失效。不过,在 Element Plus 的当前版本中,这是一个可行的方法。

更好的方式是使用 Element Plus 的自定义主题功能或者等待 Element Plus 官方提供更为正式的全局配置 API。同时,也要关注 Element Plus 的更新日志,以便及时调整你的代码。

如果你发现你的 Dialog 组件在设置了 close-on-click-modal="false" 后仍然会在点击遮罩层时关闭,可能是因为你的项目中存在其他代码或插件影响了这个行为。这时,你需要检查你的项目代码,确保没有其他地方在修改这个属性,或者查看是否有其他事件监听器在监听遮罩层的点击事件并触发了关闭操作。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2323.html

标签: vue弹窗组件
分享给朋友:

“Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框” 的相关文章

亚马逊推出 Amazon Linux 2023 发行版,专为 AWS 云进行优化

稿源:IT之家3 月 19 日消息,本周早些时候,亚马逊宣布推出其第三代 Linux 发行版 Amazon Linux 2023(AL2023)。亚马逊表示,该版本将带来高安全性标准、可预测的生命周期和确定性更新。Amazon Linux 2023 针对 Amazon EC2 进行了优化,与最新的...

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

vue中router常见的三种传参方式

目录:我们在使用vue开发的过程中使用router跳转的时候肯定会遇到传参的情况;一般情况就三种传参是最常见的;那我们就来看看都有那几种传参方式吧!第一种:{ path: '/mall:id', name: 'Mall', component:...

Vue中路由router的基本使用

??本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特...

史上最全 vue-router 讲解 !!!

前端路由 前端路由是后来发展到SPA(单页应用)时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转。 前端路由在SPA项目中是必不可少的,页面的跳转、刷新都与路由有关,通过不同的url显示相应的页面。 优点:前...

VUE3+JAVA商城源码小程序APP商城

三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。软件架构后端: springboot2.3.12管...