SettingsSelect

設定表單專用之下拉選單(薄封裝 w-component-vue 之 WTextSelect)。

存在理由有二:

1. 樣式單一來源 —— 表單有 7 個下拉, 若每處各寫一遍 12 行外觀 props, 那是同一規則手寫 7 次; 外觀(邊框 #ccc / 圓角 3 / 白底 / 12px)在此固定一次, 與原生控制項之 CSS 對齊。
2. 介面收斂 —— WTextSelect 的 value 與 @input 走的是「項目物件」, 但表單各欄位持有的是「值」; 物件 ↔ 值 的轉換集中於此, 呼叫端只看得到值。

相對於原生 之差異(即改用本元件的目的): 下拉清單是 DOM 元素而非 OS 層視窗, 故樣式可控 (深色主題時不會冒出系統色的清單)、且能被 e2e 真實點擊 —— 原生 select 的下拉 CDP 點不開。

items: [{ value, text }]; value: 目前值; @input: 送出新值

Description:

• 設定表單專用之下拉選單(薄封裝 w-component-vue 之 WTextSelect)。

  存在理由有二:

  1. 樣式單一來源 —— 表單有 7 個下拉, 若每處各寫一遍 12 行外觀 props, 那是同一規則手寫 7 次; 外觀(邊框 #ccc / 圓角 3 / 白底 / 12px)在此固定一次, 與原生控制項之 CSS 對齊。
  2. 介面收斂 —— WTextSelect 的 value 與 @input 走的是「項目物件」, 但表單各欄位持有的是「值」; 物件 ↔ 值 的轉換集中於此, 呼叫端只看得到值。

  相對於原生

之差異(即改用本元件的目的): 下拉清單是 DOM 元素而非 OS 層視窗, 故樣式可控 (深色主題時不會冒出系統色的清單)、且能被 e2e 真實點擊 —— 原生 select 的下拉 CDP 點不開。

items: [{ value, text }]; value: 目前值; @input: 送出新值

Source:

• components/ui/SettingsSelect.vue, line 18