【版权声明】本文为 BFUI 组件库的故事，记录了关于 Button 按钮组件的开发设计历程。参考引用或合理转载本文内容时，请标明文章出处和链接。维护开源环境，尊重开发者劳动成果，从你我做起。

关于按钮

Button 按钮用于开启一个即时操作。

  1. 指导用户采取你希望他们采取的行动。
  2. 帮助用户避免犯错。

功能调研

我们学习了社区中优秀组件库的设计思路，以此来指导BFUI中该组件的开发，以下是调研总结：

同类型组件库 主要功能实现 说明
Ant Design 1. 按钮类型：默认、主按钮、虚线、文本、链接
2. 状态属性：危险、幽灵、禁用、加载中		 通过五种类型和四个属性配合使用，其中danger属性控制按钮是否红色，此外没有其他颜色选项
Element-plus 按钮样式、禁用状态、图标按钮、加载状态、调整尺寸、自定义颜色、按钮组 通过type类型控制颜色，也有单独的颜色属性
Arco Design 五种类型、图标按钮、按钮形状、按钮尺寸、按钮状态、禁用状态、加载中、长按钮、组合按钮 通过status状态控制颜色
TDesign 基础按钮、图标按钮、幽灵按钮、宽按钮、颜色主题、不同状态(禁用或加载)、按钮尺寸、形状 通过theme颜色主题控制颜色
Vant 按钮类型、边框粗细、禁用状态、加载状态、按钮形状、图标按钮、按钮尺寸、宽按钮、跳转功能、自定义颜色 通过type按钮类型控制颜色
iView 按钮类型、图标按钮、按钮形状、按钮尺寸、长按钮、禁用状态、加载中、按钮组、跳转功能 通过type按钮类型实现四种样式或四种颜色

初步计划（2023-01-29）

结合其他组件库中该组件常用功能，我们初步拟定实现如下功能的开发：

Button Props

属性 Props 说明 类型 默认值
type 设置按钮类型，控制边框样式，可选值为 default、 primary、 dashed、outline、text，分别表现为：默认按钮、主要按钮、虚线按钮、描边按钮、文字按钮 String default
circle 按钮形状是否圆角 Boolean false
size 调节尺寸大小，可选值为 small、default、large String default
disable 是否为禁用状态 Boolean false
icon 设置按钮的图标 String -
loading 是否为加载中状态（相当于disable属性 + icon属性） Boolean false
status 设置按钮状态，可选值为 default 、primary、success、warning、danger，后三者背景颜色分别为“绿黄红”。(若与color属性同时存在，此属性会失效) String default
color 自定义按钮颜色，可选值参考css属性，支持颜色名称、十六进制值、rgb代码，也支持传入linear-gradient渐变色等。(此属性会覆盖status属性) String -
ghost 幽灵属性，使内容反色，背景透明，常用在有色背景上。 Boolean false

Button Events

事件 Events 说明 回调参数
click 点击按钮时触发 event: MouseEvent

以上仅为初步设想，在开发过程中可能有所调整，此外按钮组功能暂不实现。

实现难点

  1. 主要在于如何组织 CSS 代码的前后顺序，以便于不同样式属性值的覆盖；
  2. 以及如何善用 Less/Sass 的语法简化 CSS 代码长度，使样式文件简洁直观；
  3. 最后是如何引入颜色变量，以实现颜色解耦和昼夜模式的切换。