vue3-造轮子【2】-button组件

button组件

1.需求分析

image.png

2.API设计

image.png

3. vue做了自动处理事件， 默认传到组件的根元素上

image.png

这里的onclick时间会被执行， 但是在button组件中没有进行任何处理

image.png

会默认传到button组件的根元素上

改变这种情况需要加个属性

image.png

继承属性改为false， 这样写在button上的事件等都不会生效

添加$attrs后， 所有的属性/方法 会在button上生效

image.png

如果想让div 和button都可以获取到外面传来的属性或方法 可以用下面的方法

image.png

4.剩余操作符

...rest

image.png

意思是：在context.attrs 中取出size, 剩下的变量放在rest中。然后在button中绑定rest，这样就可以在button中绑定除了size的其他属性或方法

5.小结

image.png

6.扩展运算符

{...xxx}

image.png

这个意思是把props这个对象展开再打印出来

7.props和attrs的区别

image.png

props必须先声明才能取值，才能打印出来， 如果不写红框里的内容就打印不粗来，是空的

props支持string以外的类型，而attrs只有string类型

image.png

比如在父组件写了disabled（=== disabled=true）

然后打印$attrs 发现disabled:' ' 是空字符串

在props中声明一下

image.png

打印props发现，是布尔类型

image.png

小结

image.png

8.动态绑定class

image.png

这个意思是 如果theme没传， 那么就不会有任何类，如果传了有值， 就会成 theme-xxx

9.flex&inline-flex

flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示

flex：父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%
inline-flex ：则会使父元素尺寸跟随子元素们的尺寸动态调整

10. 库css的注意事项

image.png

为了防止更改全局样式， 所以需要限定一下， 匹配所有gulu-开头的， 或类名中含有空格+gulu- 的元素
这样写的话就可以匹配到 类似 <div class="xxx gulu-button">的元素了

image.png

11.使用计算属性设置class

image.png

image.png

12.如果在props中声明了，就不会继承了，需要手动写

image.png

总结

image.png

手绘风格的UI库
wired elements : https://wiredjs.com/showcase.html