FE-阿阳的博客

问题描述项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位问题结果使用 Form.Item 中的 getValueFromEvent 属性，代码如下：<Form.Item getValueFromEvent={(e: any) => { const { value } = e.target; const tempArr = value.split('.'); if (tempArr[1]?.length) { retu

问题描述antd Form 中 Form.Item 有时会使用自己封装的组件，然后发现 Form 的 initialValues 不起作用，以及 onValuesChange 不会触发，获取不到值；解决方案封装的子组件中需要手动设置赋值和调用传值，代码如下：import { memo } from 'react';import { Select } from '@homed/mortise-ui';import { SquareMini16pt } from '@homed/mortise-i

antd 中 Table 使用问题总结问题描述最近经常遇到 table 的宽度问题，UI 有各种列宽度的需求，这里记录总结下问题结果如果只给某些列设置 width 值，则设置 width 值的列表会有固定宽度，其他列根据内容自适应分配剩余宽度如果给所有列设置 width 值，则所有列根据 width 的比列分配总体宽度如果想达到一列宽度固定，其他列平分布局，可以巧用 fixed 属性，比如最后一列设置 fixed: ‘right’ 属性，给 Table 设置 scroll={{ x: 1200

antd 中 Tooltip 组件设置偏移量问题描述后台的平台用到 antd 的比较多，Tooltip 也是比较常用的组件之一，Tooltip 的 placement 属性支持设置提示的位置，但是有时候 UI 那关还是过不去，想要增加一点偏移量，就需要折腾一番。解决方案由于 Tootip 是动态设置的位置，所以设置的 ‘transform: translate’ 偏移量不起作用，这时候需要用到 align 属性，align 属性官网没做详细链接，只是提示参考 https://github.com/r

ant Design 中使用 :global问题描述接触 antd 项目，发现样式里面有 :global 写法，研究一下问题结果less 文件中的写法如下：.houseInfoCard { margin-bottom: 20px; :global { .ant-form-item { margin-bottom: 10px; } }}这里这么写主要是为了覆盖 antd 的样式；有两点需要注意：引入的 antd 组件类名没有被 CSS Modu