Skip to content

0804

工作

  • 问题1-全局设置 AntD 属性:一般来说,如果要自定义组件的主题或者样式,定义一个全局的 css 或者使用 css module的方式文件覆盖 AntD 默认样式即可;但是,对于 AntD 组件的默认 属性 如何覆盖?

今天有个需求是,设置 Modal 框的 maskClosable 属性,即默认点击蒙版不关闭弹框,避免用户在弹框内编辑不小心点了蒙版就关闭了导致编辑的数据丢失。

我的做法是,先看看 AntD 有没有提供设置默认属性的方式,看了下,没有;然后只能项目全局搜索 Modal 组件,给每一个组件设置 props 这个 maskClosable 属性为 false;左边的大佬同事一听,就对我嗤之以鼻了,显然看不惯我的这种做法,他直接看了下 Modal 的源码,然后再项目的 App.tsx 文件中,设置了 Modal.defaultProps.maskClosable = false,我直呼 NB 啊!

确实啊,如果 组件没提供某个方式 ,那么只能看源码了,然而,我还是...很菜...

Modal组件源码

  • 问题2-Flex 默认撑满高度:一个父组件下有多个子组件,某一个子组件因为设置了宽度,但是内容超长,撑开了高度,导致其他兄弟组件也默认撑开了高度;想要的效果是其他兄弟组件不要和这个兄弟组件一样被撑开高度,因此,这些 【被带胖】的兄弟组件,需要设置 align-self: base-line; 样式,让自己始终保持自己的 “身材” 不变形。

  • 问题3-文本域输入内容,在输出结果要保持一致;如果用户输入了 空格、回车换行,在展示态的时候,也要展示对应的回车换行。但是如果只是以 <div>{value}</div> 的方式展示,是不行的。需要处理回车和空格:

value.split('\r').map(v => <div>{value.replace(/\s/g, '&ngsp;')}</div>)
  • 其他工作:联调,自测,修复bug

好文推荐

项目推荐

TODOS

  • react-dnd 使用总结

Released under the MIT License.