当前位置: 首页 > 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';

就可以全局覆盖

http://www.dtcms.com/a/155049.html

相关文章:

  • 【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解决方法)
  • 从StandardMaterial和PBRMaterial到PBRMetallicRoughnessMaterial:Babylon.js材质转换完全指南
  • 附赠二张图,阐述我对大模型的生态发展、技术架构认识。
  • 力扣-160.相交链表
  • day49—双指针+贪心—验证回文串(LeetCode-680)
  • 基于Node+HeadlessBrowser的浏览器自动化方案
  • 多模态(3):实战 GPT-4o 视频理解
  • APP和小程序需要注册域名吗?(国科云)
  • kubesphere 单节点启动 etcd 报错
  • 【数据可视化-33】病毒式社交媒体潮流与用户参与度可视化分析
  • 解决视频处理中的 HEVC 解码错误:Could not find ref with POC xxx【已解决】