SettingsText

設定表單專用之文字輸入框(薄封裝 w-component-vue 之 WText)。

存在理由同 SettingsSelect: 外觀 props 集中一處(表單有 4 個文字欄), 且把 WText 之 @input(value, err, event) 三參數簽章收斂成只送值。

WText 預設為「底線」外觀(bottomLine* 系列), 此處關掉底線改用四邊框線, 以對齊表單既有之 原生控制項樣式(1px #ccc / 圓角 3 / 白底)。

height 給 14 而非 18: 該 prop 指的是內容區高度, 外框尚須加上 padding(1+1)與 border(1+1), 故 14 + 2 + 2 = 18px, 恰與同表單之原生 number input 等高(給 20 會得到 24px 而比鄰列高出一截)。

Description:
  • 設定表單專用之文字輸入框(薄封裝 w-component-vue 之 WText)。

    存在理由同 SettingsSelect: 外觀 props 集中一處(表單有 4 個文字欄), 且把 WText 之 @input(value, err, event) 三參數簽章收斂成只送值。

    WText 預設為「底線」外觀(bottomLine* 系列), 此處關掉底線改用四邊框線, 以對齊表單既有之 原生控制項樣式(1px #ccc / 圓角 3 / 白底)。

    height 給 14 而非 18: 該 prop 指的是內容區高度, 外框尚須加上 padding(1+1)與 border(1+1), 故 14 + 2 + 2 = 18px, 恰與同表單之原生 number input 等高(給 20 會得到 24px 而比鄰列高出一截)。

Source: