Administrator
Administrator
Published on 2025-04-08 / 4 Visits
0
0

Button组件实现

1. 需求分析

  • 大多关注样式,交互较少

  • 分为多种类型按钮,有不同类型的样式(Primary、Danger、Info、Success、Warning)

  • 拥有disable(禁用)、round(圆角)、plain(朴素)、size(大小)、circle(圆形)、loading多种状态

2. 编码实现

2.1. 总体思想

button不同类型样式通过动态赋类来动态赋予样式。多种状态因只有两种情况,所以可以直接判断,同样通过类来进行动态样式,但是只有区分一种情况。通过插槽将文本嵌入按钮组件。

├── Button/                # 按钮组件专属目录
│   ├── Button.vue         # 按钮Vue组件实现文件
│   └── style.css          # 按钮专属样式表 
│   └── types.ts           # Button类型定义文件
├── icons/                 # 矢量图标资源库

2.2. 不同类型样式实现

先在type.ts中定义需要使用的接口

设置对应的模板,重点在于动态设置类。

通过postcss中的遍历语法,一次性设置不同类型的样式

2.3. 不同状态实现

动态设置模板属性

根据不同类设置不同样式

2.4. 暴露内容

通过ref暴露按钮实例,给用户灵活操作

获取示例用例

2.5. 使用效果示例


Comment