这是一个创建于 420 天前的主题，其中的信息可能已经有所发展或是发生改变。
我感觉不止是 Button 组件，C 端的 UI 组件真的很难封装。拿 Button 来说：
我接手项目前，Button 是椭圆圆角的，并且可控度不够高。姑且称之为，ButtonV1
后来设计师 A 说，要改成小圆角的，字重要 Semibold 的，没有 padding 等等，我封装了一个新版本，并且改进了可控度。称之为，ButtonV2 。但实际用起来的时候，已经觉得很怪。给的设计稿，button 经常长得有细微差别。一会是 Semibold 的字重、一会是 Bold ； padding 也很不一样，没有一个定律。搞得最后，有封装跟没封装一样。
再后来设计师 A 离职了，设计师 B 接手了。给的设计稿又是另一个风格，回到了最初的椭圆圆角系。用 ButtonV2 要写更多的覆盖样式。
我不知道各位怎么封装这种变化多端的组件的？
我接手项目前，Button 是椭圆圆角的，并且可控度不够高。姑且称之为，ButtonV1
后来设计师 A 说，要改成小圆角的，字重要 Semibold 的，没有 padding 等等，我封装了一个新版本，并且改进了可控度。称之为，ButtonV2 。但实际用起来的时候，已经觉得很怪。给的设计稿，button 经常长得有细微差别。一会是 Semibold 的字重、一会是 Bold ； padding 也很不一样，没有一个定律。搞得最后，有封装跟没封装一样。
再后来设计师 A 离职了，设计师 B 接手了。给的设计稿又是另一个风格，回到了最初的椭圆圆角系。用 ButtonV2 要写更多的覆盖样式。
我不知道各位怎么封装这种变化多端的组件的？
 |
1
NerbraskaGuy 2023-10-08 17:47:03 +08:00
本质是没有统一的设计规范吧，UI 按照自己的习惯来设计的话前端样式没法复用很正常，像 antd 那种框架虽说能实现组件各种自定义样式，但是也是在规定的范围内变的
|
 |
2
justdoit123 OP @NerbraskaGuy antd 那种适用于后台系统我知道。toC 场景下，这种“样式没法复用很正常”真的是常态吗？ T_T
|
 |
3
xxmym 2023-10-08 19:44:40 +08:00
本质上是 ui 水平不行，设计不光要好看更要克制。尽量制定设计规范吧
|
 |
4
hexi1997 2023-10-17 18:23:56 +08:00
说下我这边的解决方案，使用 tailwindcss+classname ，button 只封装基本样式的 flex item-center justify-center hover:opaction-75 。然后使用的时候通过 className 参数传递 w-[xxx] h-[xxx] rounded-[xxx] font-[xxx] text-[xxx]。当然 button 也可以自定义默认的 宽高、圆角。通过 !w-[xxx] 覆盖即可。
|
Select Language