InputTag 標籤輸入框

讓使用者自行輸入多個短字詞,每個輸入值成為一個可刪除的標籤。使用 Element Plus 的 el-input-tag,本頁定義 Accuhit 產品中的使用準則。

版本需求

el-input-tag 為 Element Plus 2.9.0 後新增,本站與各產品目前使用 2.14.3,可直接使用。

什麼時候用它(最重要)

先問一句:選項是固定的嗎?

情境	用哪個
值由使用者自由輸入、沒有固定清單(自訂標籤、關鍵字、收件人)	InputTag
從既有選項中挑多個(部門、狀態、組織)	Select 加 multiple
只是呈現一組標籤、不需編輯	Tag

用錯的典型症狀:選項明明固定,卻用 InputTag,結果使用者打錯字產生一堆同義標籤(「行銷」「行銷部」「Marketing」),資料再也對不起來。

設計準則

• placeholder 要寫出觸發鍵 —— 寫「輸入後按 Enter」,不要只寫「請輸入標籤」;使用者不會自己猜要按什麼
• 標籤顏色一律用預設的 info(中性灰) —— 標籤在這裡是「使用者輸入的資料」,不帶狀態含義。依顏色使用順位,不可拿語意色當裝飾
• 有上限就設 max —— 後端或商業規則有數量限制時,用 max 擋在前面,不要等送出才報錯
• 會貼上大量內容的欄位設 delimiter —— 讓使用者從 Excel、記事本貼一整串進來就自動拆好
• 空間窄就用 collapse-tags —— 表格行內、工具列等狹窄處收合成「+N」,並開 collapse-tags-tooltip 讓人能看全
• 欄位標籤放在框外,規則(如「最多 5 個」「用逗號分隔」)寫在欄位下方的說明文字

基本用法

v-model 綁定的是字串陣列,不是字串:

loading

尺寸

三種尺寸對應三種場景;同一張表單只用一種:

loading

數量上限

有上限時用 max,並在欄位下方即時顯示已用數量,達上限後輸入框會自動停用:

loading

分隔符自動建立

設 delimiter 後,遇到該字元就自動成為一個標籤。 適合「從別處複製一整串貼上」的情境(可傳字串或正規表達式):

loading

收合顯示

標籤多、空間窄時收合成「+N」; 搭配 collapse-tags-tooltip 讓滑鼠移上去能看到完整清單:

loading

可拖曳排序

當順序有意義時(流程步驟、優先序)才開 draggable; 單純的分類標籤不需要,多一個可拖曳的互動反而讓人以為順序有差別:

loading

禁用與清空

disabled 用於規則上不可改的欄位;搜尋、篩選類欄位加 clearable 讓使用者一鍵重來:

loading

Do / Don't

✅ Do	❌ Don't
選項固定時改用 Select multiple	固定選項也讓使用者自由打字
placeholder 寫「輸入後按 Enter」	只寫「請輸入」,使用者不知道怎麼送出
標籤用預設 info 中性色	用 success / danger 當裝飾色
有上限就設 max + 顯示計數	讓使用者輸入完才報「超過上限」
貼上情境設 delimiter	要求使用者一個一個慢慢打
窄空間用 collapse-tags	讓標籤把版面撐爆
順序有意義才用 draggable	一律開啟拖曳

給工程師

• v-model 型別為 string[]
• 常用 props:max、delimiter、trigger(預設 Enter)、draggable、collapse-tags / collapse-tags-tooltip / max-collapse-tags、save-on-blur(預設 true)、clearable、disabled、size
• 標籤樣式用 tag-type / tag-effect 控制,維持預設 info
• 事件:change、input、add-tag、remove-tag、focus、blur、clear

完整 API 見 Element Plus InputTag 文件。 本站規範優先於 EP 文件中的視覺建議。