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

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

ruisui884个月前 (02-27)技术分析30

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 组件实现点击遮罩层不关闭对话框” 的相关文章

学会使用Vue JSX,一车老干妈都是你的

作者:子君转发链接:https://mp.weixin.qq.com/s/eAOivpHeowLShfwPfW8-BA?君自前端来,应知前端事。需求时时变,bug改不完。?连续几篇文章,每篇都有女神,被老铁给吐槽了,今天不提了女神了,反正女神都是别人的(扎心了)。这两天小编看了腾讯与老干妈的事情,晚...

快速掌握 Git:程序员必会的版本控制技巧

在现代软件开发中,版本控制系统(VCS)是开发人员不可或缺的工具。无论是个人项目,还是多人协作的团队开发,良好的版本控制都能确保代码管理的高效性与稳定性。而在版本控制系统中,Git 凭借其分布式、灵活性和高效性,成为了最流行的工具之一。几乎所有的开发团队都在使用 Git 来管理代码版本、协作开发和追...

祸害阿里云宕机3小时的IO HANG究竟是什么?

本文来自微信公号“CSDN”(ID:CSDNnews),作者 | 王知无, 责编| 郭 芮。2019年3月3日凌晨,微博炸锅,有网友反映说阿里云疑似出现宕机,华北很多互联网公司受到暴击伤害,APP、网站全部瘫痪,我自己的朋友圈和微信群里也有好友反馈,刚刚从被窝被叫起来去修Bug,结果发现服务器登不上...

Vue实战篇|使用路由管理用户权限(动态路由)

权限控制是后台管理系统比较常见的需求,如果我们需要对某些页面的添加权限控制的话,那我们可以在路由管理中的权限做一些校验,没有通过权限校验的给出相应的提示或者直接跳转到报错页面。跟着我一起来学vue实战篇路由管理权限吧!权限校验函数getCurrentAuthority()函数用于获取当前用户权限,一...

并列双缸之同步和异步

并列双缸引擎,分为同步双缸和异步双缸1 并列同步引擎即?360°曲轴?相位?,就是将一个大的缸体,分为两个小的缸体。并且它们的活塞是同上同下运行的,虽然它们的机械结构保持了一致,但他们并不是真正意义上的同步工作,因为?它们?是?异步?点火?的?,例如,如果A缸正在点火,那么B缸就处于停功状态。理论上...

甘肃省2023年普通高校毕业生基层服务项目考试成绩今日公布

甘肃省2023年普通高校毕业生基层服务项目考试成绩今日公布每日甘肃网7月12日讯据兰州日报报道 近日,记者从甘肃省人力资源考试中心了解到,甘肃省2023年普通高校毕业生基层服务项目(三支一扶、特岗计划、西部计划)考试成绩于7月12日9:00开通查询。考生可登录“甘肃人事考试网”,点击“成绩查询”栏目...