【版权声明】本文为 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 设置按钮类型,控制边框样式,可选值为 defaultprimary dashedoutlinetext,分别表现为:默认按钮、主要按钮、虚线按钮、描边按钮、文字按钮 String default
circle 按钮形状是否圆角 Boolean false
size 调节尺寸大小,可选值为 smalldefaultlarge String default
disable 是否为禁用状态 Boolean false
icon 设置按钮的图标 String -
loading 是否为加载中状态(相当于disable属性 + icon属性) Boolean false
status 设置按钮状态,可选值为 defaultprimarysuccesswarningdanger,后三者背景颜色分别为“绿黄红”。(若与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. 最后是如何引入颜色变量,以实现颜色解耦和昼夜模式的切换。