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暴露按钮实例,给用户灵活操作
获取示例用例