Vue3造轮子--Button组件

102 阅读1分钟

前言:在写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,后面在改写

五.具体实现效果

image.png

源码已放到Gitee托管,感兴趣的小伙伴可以访问 gitee.com/boheweb/min…