button組件

1.需求分析

image.png

2.API設(shè)計(jì)

image.png

3. vue做了自動(dòng)處理事件， 默認(rèn)傳到組件的根元素上

image.png

這里的onclick時(shí)間會(huì)被執(zhí)行， 但是在button組件中沒(méi)有進(jìn)行任何處理

image.png

會(huì)默認(rèn)傳到button組件的根元素上

改變這種情況需要加個(gè)屬性

image.png

繼承屬性改為false， 這樣寫(xiě)在button上的事件等都不會(huì)生效

添加$attrs后， 所有的屬性/方法 會(huì)在button上生效

image.png

如果想讓div 和button都可以獲取到外面?zhèn)鱽?lái)的屬性或方法 可以用下面的方法

image.png

4.剩余操作符

...rest

image.png

意思是：在context.attrs 中取出size, 剩下的變量放在rest中。然后在button中綁定rest，這樣就可以在button中綁定除了size的其他屬性或方法

5.小結(jié)

image.png

6.擴(kuò)展運(yùn)算符

{...xxx}

image.png

這個(gè)意思是把props這個(gè)對(duì)象展開(kāi)再打印出來(lái)

7.props和attrs的區(qū)別

image.png

props必須先聲明才能取值，才能打印出來(lái)， 如果不寫(xiě)紅框里的內(nèi)容就打印不粗來(lái)，是空的

props支持string以外的類(lèi)型，而attrs只有string類(lèi)型

image.png

比如在父組件寫(xiě)了disabled（=== disabled=true）

然后打印$attrs 發(fā)現(xiàn)disabled:' ' 是空字符串

在props中聲明一下

image.png

打印props發(fā)現(xiàn)，是布爾類(lèi)型

image.png

小結(jié)

image.png

8.動(dòng)態(tài)綁定class

image.png

這個(gè)意思是 如果theme沒(méi)傳， 那么就不會(huì)有任何類(lèi)，如果傳了有值， 就會(huì)成 theme-xxx

9.flex&inline-flex

flex： 將對(duì)象作為彈性伸縮盒顯示
inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示

flex：父元素的尺寸不由子元素尺寸動(dòng)態(tài)調(diào)整，不設(shè)置時(shí)默認(rèn)是100%
inline-flex ：則會(huì)使父元素尺寸跟隨子元素們的尺寸動(dòng)態(tài)調(diào)整

10. 庫(kù)css的注意事項(xiàng)

image.png

為了防止更改全局樣式， 所以需要限定一下， 匹配所有g(shù)ulu-開(kāi)頭的， 或類(lèi)名中含有空格+gulu- 的元素
這樣寫(xiě)的話(huà)就可以匹配到 類(lèi)似 <div class="xxx gulu-button">的元素了

image.png

11.使用計(jì)算屬性設(shè)置class

image.png

image.png

12.如果在props中聲明了，就不會(huì)繼承了，需要手動(dòng)寫(xiě)

image.png

總結(jié)

image.png

手繪風(fēng)格的UI庫(kù)
wired elements : https://wiredjs.com/showcase.html