前言:在写Button组件时，写的笔记，记录一下学习过程~
一.Vue3 属性绑定
- 默认所有属性都绑定到根元素
- 使用
inheritAttrs: false可以取消默认绑定 - 使用
$attrs或者context.attrs获取所有属性 - 使用
v-bind="$attrs"批量绑定属性 - 使用
const {size, level, ...xxx} = context.attrs将属性分开
二.UI库的CSS注意事项
1.不能使用 scoped
- 因为data-v-xxx中的xxx每次运行可能不同
- 必须输出稳定不变的class 选择器，方便使用者覆盖
2.必须加前缀
- .button不行，很容易被使用者覆盖
- .mint-button可以，不太容易被覆盖
- .theme-link不行，很容易被使用者覆盖
- .mint-theme-link可以，不太容易被覆盖
3.CSS最小影响原则
4.其他
- 如何做 loading 动画
三.API设计
Button组件怎么用
<Button
@click=?
@focus=?
@mouseover=?
theme="button or link or text"
level="big or normal or minor"
size="bif normal small"
disabled
loading
></Button>
</Button>
四.推荐 Wired Elements
- 目前是仿照 AntD，后面在改写
五.具体实现效果
源码已放到Gitee托管，感兴趣的小伙伴可以访问 gitee.com/boheweb/min…
