2025-03-23-MyBadge.vue 元件的設計原理與概念

一步步解釋這個 MyBadge.vue 元件的設計原理與概念**，幫你搞懂為什麼這裡用了 :style、:class，以及這整體的元件架構是怎麼思考的。

---

🧠 設計目的：讓 Badge 能夠「高度自訂」

這個元件的目標是：

功能	使用者能控制什麼？
背景顏色	用 color props 傳入
文字顏色	用 textColor props 傳入
顯示文字	用 label props 傳入
圓角外觀	用 rounded 布林值 props 控制

我們希望使用者用法像這樣 👇：

<MyBadge label="Success" color="green" text-color="white" :rounded="true" />

所以元件內部需要根據這些 props 去調整樣式與內容。

---

🔍 為什麼使用 :style？

這是因為「背景顏色與文字顏色」是變化非常多的值（可能是任意色碼），無法提前寫死在 CSS class 中。

✅ 用 :style 是最靈活的方法：

:style="badgeStyle"

const badgeStyle = computed(() => ({
  backgroundColor: props.color,
  color: props.textColor,
}))

這會動態幫你加上類似這樣的行內樣式：

<span style="background-color: green; color: white">Success</span>

🔁 重點是：「color 跟 textColor 是動態變化的變數」，不適合寫死在 CSS。

---

🔍 為什麼使用 :class？

因為 rounded 是一個「開 / 關」的布林選項，所以只要有 true 就加上一個固定的 class，樣式可以寫死。

:class="{ rounded }"

這寫法的意思是：

• 如果 rounded === true，就加上 class "rounded"
• 否則不加

然後在 CSS 中你有：

.rounded {
  border-radius: 999px;
}

✅ 因為這個 border-radius 的樣式是固定不變的，可以寫在 CSS。

---

🧱 小結：什麼時候用 :style？什麼時候用 :class？

類型	用 :style	用 :class
值是變化多端的（如顏色）	✅	❌ 太多 class 不好維護
只有 true / false 或少數幾種選擇	❌	✅ class 控制清楚好維護
需要被覆蓋或繼承（例如 RWD）	❌	✅ CSS class 更適合寫媒體查詢
動態設計師輸入值、顏色、字體	✅	❌

---

🧠 元件設計的整體思維

面向	設計思考
資料傳入	用 props 把控制權交給父元件
外觀設計	能靈活指定背景、文字顏色、圓角
程式可讀性	讓每個 props 功能清楚、用途單一
元件通用性	把「樣式 + 組件結構」分開設計

---

✅ 小總結

你這次的元件 MyBadge.vue 設計非常符合 Vue 的「高內聚、低耦合」原則：

功能	技術解法
背景與文字顏色	用 :style 傳入自訂色碼
圓角控制	用 :class 搭配布林值
顯示文字	用 label props
簡潔的樣式範圍	使用 scoped 保護 CSS 不外洩

---

如果你理解這一題，以後你就可以自信地設計像：

• MyButton.vue（控制大小、顏色、是否 disabled）
• MyTag.vue（多種主題樣式）
• MyCard.vue（支援插槽與變化）

---

這是 Vue 3 的 Composition API 中的一種寫法，搭配 JavaScript 的「箭頭函式」語法。這行的意思是建立一個 computed 計算屬性，名稱是 badgeStyle，會根據 props.color 和 props.textColor 自動更新樣式。

---

🔍 一步步解釋

🔹 computed(() => (...)) 是什麼？

• computed() 是 Vue 提供的函式，用來建立一個 「可自動追蹤依賴的變數」。
• 只要裡面用到的值（像是 props.color）有變化，它就會重新計算。
• 常用來做樣式、文字內容的動態處理。

const badgeStyle = computed(() => ({
  backgroundColor: props.color,
  color: props.textColor
}))

代表的意思是：

badgeStyle 是一個物件，裡面有 backgroundColor 和 color，這兩個會隨著 props.color 和 props.textColor 自動變化。

---

🔹 為什麼要用 :style="badgeStyle"？

因為 badgeStyle 是一個 JavaScript 物件，我們要把它當作 HTML 的 style 屬性來使用。

• :style="badgeStyle" 是 Vue 的語法糖，意思是：綁定一個樣式物件到這個元素上
• 最後會變成這樣的 CSS：

<span style="background-color: red; color: white">...</span>

---

🔹 那 :class="{ rounded }" 又是什麼意思？

• rounded 是一個 布林值 prop

• :class="{ rounded }" 的意思是：

  如果 rounded: true，就加上 class="rounded"

這樣就能控制是否要讓這個 badge 加上圓角樣式：

.rounded {
  border-radius: 999px;
}

---

🧠 總結設計概念

功能	使用方式	原因
顏色樣式	:style="badgeStyle"	動態產生的多組 CSS 屬性
圓角切換	:class="{ rounded }"	控制要不要加上一個 class（布林值）
傳入資料	props	讓父元件可以決定 badge 的內容與樣式

這樣設計可以讓元件 通用、彈性高、可重複使用。

---