05 - Vue3 UI Framework - Button 元件

官網基本做好了，接下來開始做核心元件 傳回閱讀清單點選 這裡

在項目 <code>src</code> 目錄下建立 <code>lib</code> 檔案夾，用來存放所有的核心元件吧。然後再在 <code>lib</code> 檔案夾下建立 <code>Button.vue</code> 檔案。

您也可以進行結構化設計，比如，這裡就不進行了。

慣例先行需求分析

多種類基礎 <code>Button</code>，包含警告、成功、危險等

允許設定 <code>Button</code> 為禁用狀态

不止有傳統 <code>Button</code>，還可以有文字或連結形式

當處于加載中，<code>Button</code> 應當顯示

有不同的尺寸可供選擇

應當允許更換顔色

當滑鼠放置于 <code>Button</code> 上、滑鼠按下未松開、處于加載中等狀态時，應當變更背景色

允許使用者自定義 <code>Button</code> 上顯示的文本

那麼可以整理出以下參數表格

參數

含義

類型

可選值

預設值

level

預設類型

string

default / plain / primary / success / info / warning / danger

default

disabled

是否禁用

boolean

false / true

false

theme

式樣

button / link / text

button

loding

是否加載中

size

尺寸

middle / small / large

middle

color

顔色

任意合法顔色值

#f3678e

第 7 條，可以通過設定一個遮罩層來實作，隻要遮罩層變色，背景色也等效變色

第 8 條，可以通過插槽實作，注意 <code>vue3</code> 不建議使用具名插槽

容易得到如下骨架

首先，本質應當是一個 <code>button</code> 元素，在此基礎上，将參數清單中整理出來的每個參數，都使用 <code>v-bind</code> 綁定到 <code>button</code> 上

注意，此處綁定 <code>color</code>，必須是如上例一樣，綁定到 <code>--color</code> 屬性上，才可以在 <code>css</code> 中使用 <code>css3</code> 文法 <code>var()</code> 讀取，在 <code>css</code> 小節會再解釋，此處略

之後，在 <code>button</code> 内

放置一個遮罩層，用于變色

放置一個”加載中”的動畫，用于在加載中狀态下顯示

放置一個預設插槽，用于傳遞使用者自定義的文本

然後為上述元素配置各自的 <code>class</code> 名稱，骨架就完成了。

顯然，參數清單中整理出來的内容，一定來自引用該元件的地方的傳入，先根據參數清單，寫好 <code>ts</code> 聲明：

然後在 <code>export default</code> 中，寫入我們的參數

對于事件綁定，因為我們設計的元件隻有一個唯一的根元素，是以對于外部傳遞過來的事件，會自動綁定到元件的根元素上面。

注意 :<code>UI</code> 庫的樣式表一般不要加 <code>scoped</code> 修飾符，為了盡可能減少對使用者樣式表的影響，友善使用者 <code>DIY</code>

特别注意 : <code>button</code> 元素會有預設黑色外邊框，不屬于 <code>border</code>，必須通過 <code>outline: none;</code> 才能消除

然後，我們使用 <code>css3</code> 的 <code>var()</code> 文法，取得我們通過 <code>ts</code> 綁定到 <code>style</code> 上的 <code>--color</code> 屬性

為什麼是 <code>--color</code> 而不是 <code>color</code> ？因為 <code>var()</code> 文法要求這個參數必須是 <code>--</code> 開頭，才可以正常通路到

對于遮罩層，采用淡出到白色即可實作，原理此處不解釋了

最後，對于多種不同的 <code>button</code>，可以使用 <code>scss</code> 提供的 <code>mixin / include</code> 文法來實作，完整代碼如下：

以上，<code>button</code> 元件就完成了! :happy:

GitHub: https://github.com/JeremyWu917/jeremy-ui

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕