当前位置: 首页 > 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解决方法)
  • 饶权已任国家文物局局长
  • 上海论坛2025年会聚焦创新的时代,9份复旦智库报告亮相
  • 游戏论|迟来的忍者与武士:从《刺客信条:影》论多元话语的争议
  • 中青报:“猿辅导员工猝死”事件上热搜,是对健康职场环境的共同关切
  • 药企销售的茶碱层层流转后部分被用于制毒,销售人员一审被判15年
  • 又双叒叕出差太空了!神二十成功出发,神十九乘组扫榻以待