当前位置: 首页 > news >正文

Antd Modal Drawer 更改默认项

 当项目比较大使用了非常多的 Modal 和 Drawer 要是有需求一次性全部调整就会比较麻烦,目前 Antd 的 ConfigProvider 暂不支持(也有可能我没找到,待大佬指证)就比如由于默认 Modal Drawer 的遮罩层是可以点击关闭的,但是业务需要,要求全部不可点击,这时候一个一个去加就很麻烦,还容易遗漏。然后方案来了

React 

新建 patch 的文件夹(名字随意)

为了方便扩展,结构根据自己需要调整

src/patch/Drawer/index.ts

import { Drawer } from 'antd';/*** 全局覆盖Drawer组件默认属性配置* 1. 强制禁用maskClosable防止误触关闭(原默认值true)* 2. 保留原有默认属性配置,仅扩展新特性*/
(Drawer as React.ComponentType<any>).defaultProps = {...(Drawer as React.ComponentType<any>).defaultProps,maskClosable: false,
};

src/patch/index.ts

import * as Drawer from './Drawer';export { Drawer };

在 main.tsx 引入

import '@/patch';

就可以全局覆盖

相关文章:

  • 【leetcode刷题日记】lc.73-矩阵置零
  • 一些有关ffmpeg 使用(1)
  • Z-Wave正通过自我革新,重塑在智能家居领域新定位
  • [FPGA基础] DMA
  • 0基础 | Proteus仿真 | 51单片机 | 继电器
  • MySQL的MVCC【学习笔记】
  • 01.oracle SQL基础
  • Django之旅:第七节--模版继承
  • IDEA配置将Servlet真正布署到Tomcat
  • Matplotlib高阶技术全景解析(续):动态交互、三维可视化与性能优化
  • 【初识Trae】字节跳动推出的下一代AI原生IDE,重新定义智能编程
  • 微服务架构在云原生后端的深度融合与实践路径
  • 图论---Kruskal(稀疏图)
  • PDFMathTranslate:基于LLM的PDF文档翻译及双语对照的工具【使用教程】
  • Spine 动画教程:皮肤制作
  • 深度学习笔记22-RNN心脏病预测(Tensorflow)
  • Azure Data Factory ETL设计与调度最佳实践
  • 【RedisLockRegistry】分布式锁
  • 抖音小程序开发常见问题与代码解决方案
  • 【N8N】Docker Desktop + WSL 安装过程(Docker Desktop - WSL update Failed解决方法)
  • 王毅谈金砖国家开展斡旋调解的经验和独特优势
  • 五一去哪玩?“时代交响”音乐会解锁艺术假期
  • 南京106亿元成交19宗涉宅地块:建邺区地块楼面单价重回4.5万元
  • 中国海警位中国黄岩岛领海及周边区域执法巡查
  • 马克思主义理论研究教学名师系列访谈|杜玉华:马克思主义是“认识世界”和“改变世界”的思维工具
  • 孙磊已任中国常驻联合国副代表、特命全权大使