表單標籤

輕量自訂標記輸入表單控制項，具備自訂介面呈現、重複標記偵測和標記驗證等選項。

BootstrapVue 自 v2.2.0 起提供

標籤是一組短字串，用於各種場合，例如指定類別。使用預設使用者介面，或透過使用預設作用域插槽自訂您自己的自訂介面。

基本用法

標籤所有前導和尾隨空白會被移除，且不允許重複標籤。預設允許標籤中包含空格。

透過按一下新增按鈕、按下 Enter 鍵或 change 事件在新標籤輸入上觸發時（即焦點從輸入移開時）選用加標籤。只有當使用者輸入新的標籤值時，新增按鈕才會顯示。

預設畫面

<template>
  <div>
    <label for="tags-basic">Type a new tag and press enter</label>
    <b-form-tags input-id="tags-basic" v-model="value"></b-form-tags>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange']
      }
    }
  }
</script>

<!-- form-tags-example.vue -->

您可以透過 no-add-on-enter prop 關閉在按下 Enter 時新增新標籤，並透過 add-on-change prop 在輸入的 change 事件上啟用新增標籤。

使用分隔號建立標籤

在輸入分隔號字元（例如 空白、, 等）時自動建立標籤，將 separator prop 設定為觸發新增標籤的字元。如果需要多個分隔號字元，請將它們作為單一字串包含（例如 ' ,;'）或一組字元（例如 [' ', ',', ';']），如此一來輸入 空白、, 或 ; 即可觸發新增標籤。分隔號必須為單一字元。

以下範例在輸入 空白、, 或 ; 時自動建立標籤

<template>
  <div>
    <label for="tags-separators">Enter tags separated by space, comma or semicolon</label>
    <b-form-tags
      input-id="tags-separators"
      v-model="value"
      separator=" ,;"
      placeholder="Enter new tags separated by space, comma or semicolon"
      no-add-on-enter
    ></b-form-tags>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['one', 'two']
      }
    }
  }
</script>

<!-- form-tags-separator.vue -->

透過 Backspace 按鍵移除最後一個標籤

當 remove-on-delete prop 已設定，且使用者按 Backspace（或 Del）且輸入值為空，標籤清單中的最後一個標籤會被移除。

<template>
  <div>
    <label for="tags-remove-on-delete">Enter new tags separated by space</label>
    <b-form-tags
      input-id="tags-remove-on-delete"
      :input-attrs="{ 'aria-describedby': 'tags-remove-on-delete-help' }"
      v-model="value"
      separator=" "
      placeholder="Enter new tags separated by space"
      remove-on-delete
      no-add-on-enter
    ></b-form-tags>
    <b-form-text id="tags-remove-on-delete-help" class="mt-2">
      Press <kbd>Backspace</kbd> to remove the last tag entered
    </b-form-text>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange', 'grape']
      }
    }
  }
</script>

<!-- form-tags-remove-on-delete.vue -->

樣式選項

有數個 prop 可用於變更預設標籤界面基本樣式

Prop	說明
`tag-pills`	使用藥丸外觀呈現標籤
`tag-variant`	將其中一種 Bootstrap 主題背景變色套用在標籤上
`size`	設定元件外觀大小。'sm'、'md '（預設）或 'lg'
`placeholder`	給新的標籤輸入元件的提示文字 placeholder
`state`	設定控制元件的語境狀態。設定為 `true`（有效）、`false`（無效）或 `null`
`disabled`	將此元件設為已停用狀態

如需其他 prop，請參閱此網頁底部的元件參考部分。

元件的焦點和驗證狀態樣式仰賴 BootstrapVue 的自訂 CSS。

<template>
  <div>
    <label for="tags-pills">Enter tags</label>
    <b-form-tags
      input-id="tags-pills"
      v-model="value"
      tag-variant="primary"
      tag-pills
      size="lg"
      separator=" "
      placeholder="Enter new tags separated by space"
    ></b-form-tags>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange', 'grape']
      }
    }
  }
</script>

<!-- form-tags-style-options.vue -->

與原生的瀏覽器的 `<form>` 送出一起使用

標籤輸入的值不會透過標準表單 action 送出，除非透過 name prop 提供名稱。當有提供名稱時，<b-form-tags> 會為每個標籤建立一個隱藏的 <input>。隱藏的 input 將把 name 屬性設定為 name prop 的值。

在使用自訂渲染時也會產生隱藏的輸入（當 name prop 已設定）。

標籤驗證

預設，<b-form-tags> 會在偵測到使用者嘗試輸入（大小寫敏感）的重複標籤時提供整合式的回饋給使用者。

你可以選擇透過 tag-validator prop 提供一個標籤驗證方法。驗證函式會收到一個引數，即為正要增加的標籤，而應傳回 true（表示標籤已通過驗證且可增加），或 false（表示標籤驗證失敗，因此不會將其增加至標籤陣列中的）。整合式的回饋中會列出無法增加的無效標籤，提供給使用者。

標籤驗證僅會發生在透過使用者輸入所增加的標籤。透過 v-model 對標籤所做的變更不會驗證。

<template>
  <div>
    <b-form-group label="Tags validation example" label-for="tags-validation" :state="state">
      <b-form-tags
        input-id="tags-validation"
        v-model="tags"
        :input-attrs="{ 'aria-describedby': 'tags-validation-help' }"
        :tag-validator="tagValidator"
        :state="state"
        separator=" "
      ></b-form-tags>

      <template #invalid-feedback>
        You must provide at least 3 tags and no more than 8
      </template>

      <template #description>
        <div id="tags-validation-help">
         Tags must be 3 to 5 characters in length and all lower
         case. Enter tags separated by spaces or press enter.
        </div>
      </template>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tags: [],
        dirty: false
      }
    },
    computed: {
      state() {
        // Overall component validation state
        return this.dirty ? (this.tags.length > 2 && this.tags.length < 9) : null
      }
    },
    watch: {
      tags(newValue, oldValue) {
        // Set the dirty flag on first change to the tags array
        this.dirty = true
      }
    },
    methods: {
      tagValidator(tag) {
        // Individual tag validator function
        return tag === tag.toLowerCase() && tag.length > 2 && tag.length < 6
      }
    }
  }
</script>

<!-- b-form-tags-validation-feedback.vue -->

偵測新的、無效且重複的標籤

每當有新標籤輸入新的標籤輸入元件時，或標籤驗證失敗、甚至是偵測到重複的標籤時，tag-state 事件就會發射。事件處理常式會收到三個陣列作為其引數

validTags（通過驗證的標籤）
invalidTags（未通過驗證的標籤）
duplicateTags（會重複現有或 validTags 中標籤的標籤）。

只會在新的標籤輸入變更時 (輸入字符被視為標籤的一部分)，或當使用者嘗試新增標籤 (也就是透過 Enter、按下新增按鈕，或輸入分隔符號) 發出事件。當使用者清除新的標籤輸入元素時 (或只包含空格)，三個陣列將為空。

如果您在 <b-form-tags> 元件之外提供自己的重複和無效標籤回饋 (透過使用 tag-state 事件)，您可以透過將 duplicate-tag-text 及 invalid-tag-text (分別) 設為空字串 ('') 或 null 來停用內建的重複和無效訊息。

<template>
  <div>
    <label for="tags-state-event">Enter tags</label>
    <b-form-tags
      input-id="tags-state-event"
      v-model="tags"
      :tag-validator="validator"
      placeholder="Enter tags (3-5 characters) separated by space"
      separator=" "
      @tag-state="onTagState"
    ></b-form-tags>
    <p class="mt-2">Tags: {{ tags }}</p>
    <p>Event values:</p>
    <ul>
        <li>validTags: {{ validTags }}</li>
        <li>invalidTags: {{ invalidTags }}</li>
        <li>duplicateTags: {{ duplicateTags }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tags: [],
        validTags: [],
        invalidTags: [],
        duplicateTags: []
      }
    },
    methods: {
      onTagState(valid, invalid, duplicate) {
        this.validTags = valid
        this.invalidTags = invalid
        this.duplicateTags = duplicate
      },
      validator(tag) {
        return tag.length > 2 && tag.length < 6
      }
    }
  }
</script>

<!-- b-form-tags-tags-state-event.vue -->

限制標籤

如果您想限制使用者可以新增的標籤數量，請使用 limit 屬性。完成設定後，只能透過 v-model 來新增多於 limit 允許的標籤。

當標籤數量達到上限時，使用者仍然可以輸入，但無法新增更多標籤。系統會顯示訊息以提供使用者已達上限的回饋。您可以透過 limit-tags-text 屬性設定此訊息。將其設定為空字串 ('') 或 null 將會停用回饋。

刪除標籤不受 limit 屬性影響。

<template>
  <div>
    <label for="tags-limit">Enter tags</label>
    <b-form-tags input-id="tags-limit" v-model="value" :limit="limit" remove-on-delete></b-form-tags>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
        limit: 5
      }
    }
  }
</script>

<!-- b-form-tags-limit.vue -->

透過預設涵蓋範圍的插槽自製呈現

如果您喜歡標籤控制項有不同的觀感，您可以透過預設涵蓋範圍的插槽提供自己的自製呈現。您可以新增自己的標籤，或使用我們的輔助程式 <b-form-tag> 元件。

涵蓋範圍屬性

預設涵蓋範圍的插槽提供許多屬性和方法，可供您在自製介面中使用。並非所有屬性或方法都是產生介面所必需的。

預設插槽涵蓋範圍的屬性如下

屬性	類型	說明
`addButtonText`	字串	`add-button-text` 屬性的值
`addButtonVariant`	字串	`add-button-variant` 屬性的值
`addTag`	函數	用於新增新標籤的方法。假設標籤為輸入的值，但也可以選擇接受一項引數，為要新增的標籤值
`disableAddButton`	布林值	如果輸入中的標籤無法新增 (全部無效和/或重複)，將為 `true`
`disabled`	布林值	`true` 如果元件處於停用狀態。 `disabled` 屬性的值
`duplicateTagText`	字串	`duplicate-tag-text` 屬性的值
`duplicateTags`	陣列	使用者已輸入的重複標籤陣列
`form`	字串	v2.20.0+ `form` 屬性的值
`inputAttrs`	物件	透過 `v-bind="inputAttrs"` 套用至新的標籤輸入元素的屬性物件。詳情請見下方
`inputHandlers`	物件	物件
`inputId`	字串	新增至新標籤輸入元素的 ID。預設是 prop `input-id`。如果未提供會自動產生一組唯一的 ID。也可透過 'inputAttrs.id' 存取
`inputType`	字串	v2.3.0+ 要呈現的輸入類型（prop `input-type` 的正規化版本）
`invalidTagText`	字串	`invalid-tag-text` prop 的值
`invalidTags`	陣列	使用者輸入的無效標籤陣列
`isDuplicate`	布林值	如果使用者的輸入包含重複標籤，則為 `true`
`isInvalid`	布林值	如果使用者的輸入包含無效標籤，則為 `true`
`isLimitReached`	布林值	v2.17.0+ 如果已設定 `limit`，並且標籤數量已達上限，則為 `true`
`limitTagsText`	字串	v2.17.0+ `limit-tags-text` prop 的值
`limit`	字串	v2.17.0+ `limit` prop 的值
`noTagRemove`	布林值	v2.21.0+ `no-tag-remove` prop 的值
`placeholder`	字串	`placeholder` prop 的值
`removeTag`	函數	移除標籤的方法。接受一個參數，也就是要移除的標籤值
`required`	布林值	v2.20.0+ `required` prop 的值
`separator`	字串	`separator` prop 的值
`size`	字串	`size` prop 的值
`state`	布林值	元件的內容狀態。 `state` prop 的值。可能的值有 `true`、`false` 或 `null`
`tagClass`	字串、陣列或物件	`tag-variant` prop 的值。要套用於標籤元素的類別（或類別）
`tagPills`	布林值	`tag-pills` prop 的值
`tagRemoveLabel`	字串	`tag-remove-label` prop 的值。用於標籤移除按鈕的 `aria-label` 屬性
`tagVariant`	字串	`tag-variant` prop 的值
`tags`	陣列	當前標籤字串陣列

`inputAttrs` 物件屬性

inputAttrs 物件包含要繫結 (v-bind) 至新標籤輸入元素的屬性。

屬性	類型	說明
`disabled`	布林值	新標籤輸入的 `disabled` 屬性。 `disabled` prop 的值
`form`	字串	新標籤輸入的 `form` 屬性。 `form` prop 的值
`id`	字串	新標籤輸入的 `id` 屬性
`value`	字串	新標籤輸入的 `value` 屬性

inputAttrs 物件還會包括透過 input-attrs prop 設定的任何屬性。請注意，上述屬性會優先於 input-attrs prop 中指定的任何相同屬性。

`inputHandlers` 物件屬性

inputHandlers 物件包含要繫結 (v-on) 至新標籤輸入元素的事件處理常式。

屬性	類型	說明
`change`	函數	輸入元素 `change` 事件的事件處理常式。接受單一參數，可能是事件物件或字串。變更會觸發新增標籤。
`input`	函數	輸入元素 `input` 事件的事件處理常式。接受單一參數，可能是事件物件或字串。更新新標籤輸入元素的內部 v-model。
`keydown`	函數	輸入元素 `keydown` `Enter` 和 `Del` 事件的事件處理常式。接受單一參數，為原生 keydown 事件物件。

必要時，必須透過 add-on-change 屬性啟用 change 處理常式，否則它為 no-op 方法。

使用原生瀏覽器輸入元件

作用範圍包含可直接繫結至原生 <input> 或 <select> 元素的屬性及事件處理常式。

下列範例包含螢幕閱讀程式支援所需的建議 ARIA 屬性和角色。

<template>
  <div>
    <b-form-tags v-model="value" no-outer-focus class="mb-2">
      <template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
        <b-input-group aria-controls="my-custom-tags-list">
          <input
            v-bind="inputAttrs"
            v-on="inputHandlers"
            placeholder="New tag - Press enter to add"
            class="form-control">
          <b-input-group-append>
            <b-button @click="addTag()" variant="primary">Add</b-button>
          </b-input-group-append>
        </b-input-group>
        <ul
          id="my-custom-tags-list"
          class="list-unstyled d-inline-flex flex-wrap mb-0"
          aria-live="polite"
          aria-atomic="false"
          aria-relevant="additions removals"
        >
          <!-- Always use the tag value as the :key, not the index! -->
          <!-- Otherwise screen readers will not read the tag
               additions and removals correctly -->
          <b-card
            v-for="tag in tags"
            :key="tag"
            :id="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
            tag="li"
            class="mt-1 mr-1"
            body-class="py-1 pr-2 text-nowrap"
          >
            <strong>{{ tag }}</strong>
            <b-button
              @click="removeTag(tag)"
              variant="link"
              size="sm"
              :aria-controls="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
            >remove</b-button>
          </b-card>
        </ul>
      </template>
    </b-form-tags>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange', 'banana', 'pear', 'peach']
      }
    }
  }
</script>

<!-- form-tags-custom-native.vue -->

使用自訂表單元件

作用範圍包含可直接繫結至大部分自訂輸入元件或選取元件的屬性和事件處理常式 (事件處理常式可接受字串標籤值或原生事件物件)。任何在輸入字元時發出 input，並且在輸入值變更時 (例如，在模糊或選取時) 發出 (選擇性地) change，而且使用 value 屬性作為 v-model 的元件，應該可以在不進行修改的情形下正常運作。

在這項範例中，我們使用 <b-form-tag> 輔助元件，但您可以使用標準 HTML 或元件來呈現標籤。

<template>
  <div>
    <b-form-tags v-model="value" no-outer-focus class="mb-2">
      <template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag }">
        <b-input-group class="mb-2">
          <b-form-input
            v-bind="inputAttrs"
            v-on="inputHandlers"
            placeholder="New tag - Press enter to add"
            class="form-control"
          ></b-form-input>
          <b-input-group-append>
            <b-button @click="addTag()" variant="primary">Add</b-button>
          </b-input-group-append>
        </b-input-group>
        <div class="d-inline-block" style="font-size: 1.5rem;">
          <b-form-tag
            v-for="tag in tags"
            @remove="removeTag(tag)"
            :key="tag"
            :title="tag"
            :variant="tagVariant"
            class="mr-1"
          >{{ tag }}</b-form-tag>
        </div>
      </template>
    </b-form-tags>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ['apple', 'orange', 'banana']
      }
    }
  }
</script>

<!-- form-tags-custom-components-input.vue -->

下列為使用自訂選取元件從預先定義的標籤集進行選擇的範例。

<template>
  <div>
    <b-form-group label="Tagged input using select" label-for="tags-component-select">
      <!-- Prop `add-on-change` is needed to enable adding tags vie the `change` event -->
      <b-form-tags
        id="tags-component-select"
        v-model="value"
        size="lg"
        class="mb-2"
        add-on-change
        no-outer-focus
      >
        <template v-slot="{ tags, inputAttrs, inputHandlers, disabled, removeTag }">
          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
            <li v-for="tag in tags" :key="tag" class="list-inline-item">
              <b-form-tag
                @remove="removeTag(tag)"
                :title="tag"
                :disabled="disabled"
                variant="info"
              >{{ tag }}</b-form-tag>
            </li>
          </ul>
          <b-form-select
            v-bind="inputAttrs"
            v-on="inputHandlers"
            :disabled="disabled || availableOptions.length === 0"
            :options="availableOptions"
          >
            <template #first>
              <!-- This is required to prevent bugs with Safari -->
              <option disabled value="">Choose a tag...</option>
            </template>
          </b-form-select>
        </template>
      </b-form-tags>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
        value: []
      }
    },
    computed: {
      availableOptions() {
        return this.options.filter(opt => this.value.indexOf(opt) === -1)
      }
    }
  }
</script>

<!-- b-form-tags-components-select.vue -->

如果自訂輸入使用模仿 input 和 change 的自訂事件名稱，及/或需要 keydown 的 .native 修飾詞，您可以使用類似下列方式來繫結事件處理常式。

<template #default="{ inputAttrs, inputHandlers, removeTag, tags }">
  <custom-input
    :id="inputAttrs.id"
    :vistom-value-prop="inputAttrs.value"
    @custom-input-event="inputHandlers.input($event)"
    @custom-change-event="inputHandlers.change($event)"
    @keydown.native="inputHandlers.keydown($event)"
  ></custom-input>
  <template v-for="tag in tags">
    <!-- Your custom tag list here -->
  </template>
</template>

必須將 inputHandlers.input 處理常式繫結到隨使用者輸入每個字元而更新的事件，才能讓隨打字驗證運作。

進階自訂呈現使用

在 inputHandlers 無法與您的自訂輸入搭配使用的情況中，或者您需要更精細地控制標籤建立時，您可以利用額外的屬性；這些屬性是透過預設插槽的範圍提供的。

<template>
  <div>
    <b-form-checkbox switch size="lg" v-model="disabled">Disable</b-form-checkbox>
    <b-form-tags
      v-model="value"
      @input="resetInputValue()"
      tag-variant="success"
      class="mb-2 mt-2"
      :disabled="disabled"
      no-outer-focus
      placeholder="Enter a new tag value and click Add"
      :state="state"
    >
      <template v-slot="{tags, inputId, placeholder, disabled, addTag, removeTag }">
        <b-input-group>
          <!-- Always bind the id to the input so that it can be focused when needed -->
          <b-form-input
            v-model="newTag"
            :id="inputId"
            :placeholder="placeholder"
            :disabled="disabled"
            :formatter="formatter"
          ></b-form-input>
          <b-input-group-append>
            <b-button @click="addTag(newTag)" :disabled="disabled" variant="primary">Add</b-button>
          </b-input-group-append>
        </b-input-group>
        <b-form-invalid-feedback :state="state">
          Duplicate tag value cannot be added again!
        </b-form-invalid-feedback>
        <ul v-if="tags.length > 0" class="mb-0">
          <li v-for="tag in tags" :key="tag" :title="`Tag: ${tag}`" class="mt-2">
            <span  class="d-flex align-items-center">
              <span class="mr-2">{{ tag }}</span>
              <b-button
                :disabled="disabled"
                size="sm"
                variant="outline-danger"
                @click="removeTag(tag)"
              >
                remove tag
              </b-button>
            </span>
          </li>
        </ul>
        <b-form-text v-else>
          There are no tags specified. Add a new tag above.
        </b-form-text>
      </template>
    </b-form-tags>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newTag: '',
        disabled: false,
        value: []
      }
    },
    computed: {
      state() {
        // Return false (invalid) if new tag is a duplicate
        return this.value.indexOf(this.newTag.trim()) > -1 ? false : null
      }
    },
    methods: {
      resetInputValue() {
        this.newTag = ''
      },
      formatter(value) {
        return value.toUpperCase()
      }
    }
  }
</script>

<!-- form-tags-custom-components-advanced.vue -->

下列範例說明如何透過 <b-dropdown> 元件，從預先定義的標籤集進行選擇或搜尋。

<template>
  <div>
    <b-form-group label="Tagged input using dropdown" label-for="tags-with-dropdown">
      <b-form-tags id="tags-with-dropdown" v-model="value" no-outer-focus class="mb-2">
        <template v-slot="{ tags, disabled, addTag, removeTag }">
          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
            <li v-for="tag in tags" :key="tag" class="list-inline-item">
              <b-form-tag
                @remove="removeTag(tag)"
                :title="tag"
                :disabled="disabled"
                variant="info"
              >{{ tag }}</b-form-tag>
            </li>
          </ul>

          <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
            <template #button-content>
              <b-icon icon="tag-fill"></b-icon> Choose tags
            </template>
            <b-dropdown-form @submit.stop.prevent="() => {}">
              <b-form-group
                label="Search tags"
                label-for="tag-search-input"
                label-cols-md="auto"
                class="mb-0"
                label-size="sm"
                :description="searchDesc"
                :disabled="disabled"
              >
                <b-form-input
                  v-model="search"
                  id="tag-search-input"
                  type="search"
                  size="sm"
                  autocomplete="off"
                 ></b-form-input>
              </b-form-group>
            </b-dropdown-form>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item-button
              v-for="option in availableOptions"
              :key="option"
              @click="onOptionClick({ option, addTag })"
            >
              {{ option }}
            </b-dropdown-item-button>
            <b-dropdown-text v-if="availableOptions.length === 0">
              There are no tags available to select
            </b-dropdown-text>
          </b-dropdown>
        </template>
      </b-form-tags>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
        search: '',
        value: []
      }
    },
    computed: {
      criteria() {
        // Compute the search criteria
        return this.search.trim().toLowerCase()
      },
      availableOptions() {
        const criteria = this.criteria
        // Filter out already selected options
        const options = this.options.filter(opt => this.value.indexOf(opt) === -1)
        if (criteria) {
          // Show only options that match criteria
          return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
        }
        // Show all options available
        return options
      },
      searchDesc() {
        if (this.criteria && this.availableOptions.length === 0) {
          return 'There are no tags matching your search criteria'
        }
        return ''
      }
    },
    methods: {
      onOptionClick({ option, addTag }) {
        addTag(option)
        this.search = ''
      }
    }
  }
</script>

<!-- b-form-tags-dropdown-example.vue -->

建立包裝元件

您可以依照以下方式輕易地建立具有您偏好呈現樣式的自訂包裝元件。

<template>
  <b-form-tags :value="value" @input="$emit('input', $event)">
    <template v-slot="{ tags, addTag, removeTag, inputAttrs, inputHandlers }">
     <!-- Place your custom rendering here -->
    </template>
  </b-form-tags>
</template>

<script>
  import { BFormTags } from 'bootstrap-vue'

  export default {
    name: 'MyCustomTags',
    components: { BFormTags },
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      value: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

`<b-form-tag>` 輔助元件

BootstrapVue 提供輔助元件 <b-form-tag>，可與 <b-form-tags> 的預設範圍插槽搭配使用。該元件是以 <b-badge> 和 <b-button-close> 為基礎。

<b-form-tag> 支援與 <b-badge> 相同的變異，也支援 pill 樣式。大小則根據包含元素的字體大小而定。

當 <b-form-tag> 的移除按鈕被點擊時，remove 事件會被觸發。

對於父層容器來說太寬的標籤，其文字內容會自動被省略號 (...) 截斷。因此，當使用 <b-form-tag> 的預設插槽來呈現標籤內容時，最好透過 title 屬性來提供標題。

注意 <b-form-tag> 需要使用 BootstrapVue 的自訂 CSS/SCSS 才能有適當的樣式。

元件參考

`<b-form-tags>`

v2.2.0+

檢視原始碼

<b-form-tags> 元件別名
<b-form-tags> 屬性
<b-form-tags> v-model
<b-form-tags> 插槽
<b-form-tags> 事件

元件別名

<b-form-tags> 也可用以下別名來使用

<b-tags>

注意：只有在匯入全部 BootstrapVue 或使用元件群組外掛程式時，元件別名才可用。

屬性

所有屬性的預設值皆可全域設定。

屬性 (點擊以升冪排序)	類型 (點擊以升冪排序)	預設值	說明
`add-button-text`	`字串`	`'新增'`	內建 '新增' 按鈕的文字。插槽 `add-button-text` 優先
`add-button-variant`	`字串`	`'outline-secondary'`	將其中一個 Bootstrap 主題色彩變體套用於 '新增' 按鈕
`add-on-change`	`布林值`	`false`	設為 `true` 時，可在輸入元件的 'change' 事件中新增標籤
`autofocus`	`布林值`	`false`	當設為 `true` 時，會嘗試在元件掛載時自動將焦點移到控制項，或在 keep-alive 中重新啟用時自動將焦點移到控制項。不會在控制項上設定 `autofocus` 屬性
`disabled`	`布林值`	`false`	當設為 `true` 時，會停用元件的功能並將其置於停用狀態
`duplicate-tag-text`	`字串`	`'重複標籤'`	偵測到重複標籤時顯示的訊息。設為空字串可以停用訊息
`feedback-aria-live` v2.22.0+	`字串`	`'assertive'`	用於回饋文字中 `aria-live` 屬性的值
`form`	`字串`		表單 ID，此表單控制項所屬的表單。會在控制項上設定 `form` 屬性
`id`	`字串`		用於在呈現的內容上設定 `id` 屬性，並做為產生任何額外元素 ID 的基礎，視需要使用
`ignore-input-focus-selector` v2.16.0+	`陣列` 或 `字串`	`'b-form-tag button input select'`	忽略點擊動作中用來讓輸入取得焦點的特定元素，以 CSS 選擇器指定
`input-attrs`	`物件`	`{}`	套用至新標籤輸入元素的其他屬性
`input-class`	`陣列` 或 `物件` 或 `字串`		套用至新標籤輸入元素的類別（或類別群組）
`input-id`	`字串`		套用至新標籤輸入元素的 ID。如未提供，將自動產生一個獨特的 ID
`input-type` v2.3.0+	`字串`	`'text'`	指定要使用的輸入類型：'text'、'email'、'tel'、'url' 或 'number'。預設為 'text'
`invalid-tag-text`	`字串`	`'無效標籤'`	偵測到無效標籤時的錯誤訊息。設定為空字串來停用訊息
`limit` v2.17.0+	`數字`		可以新增的最大標籤數量。如果在元件外進行操作，仍然可以超過限制
`limit-tags-text` v2.17.0+	`字串`	`'已達標籤上限'`	達到限制時的訊息。設定為空字串來停用訊息
`名稱`	`字串`		設定表單控制項上 'name' 屬性的值。設定後，會為每個標籤建立一個隱藏的輸入
`no-add-on-enter`	`布林值`	`false`	設定後，會停用在輸入的 'keydown.enter' 事件中新增標籤
`no-outer-focus`	`布林值`	`false`	設定後，會停用元件根元素的焦點樣式
`no-tag-remove` v2.21.0+	`布林值`	`false`	設定後，標籤將不會有移除按鈕
`placeholder`	`字串`	`'新增標籤...'`	設定表單控制項上的 'placeholder' 屬性值
`remove-on-delete`	`布林值`	`false`	設定後，會在使用者按下刪除或退位鍵，且輸入為空時，移除標籤中最後一個標籤
`required`	`布林值`	`false`	將 `required` 屬性新增到表單控制項
`separator`	`陣列` 或 `字串`		觸發建立標籤的分隔字元
`size`	`字串`		設定元件外觀大小。'sm'、'md '（預設）或 'lg'
`state`	`布林值`	`null`	控制元件的驗證狀態外觀。`true` 表示有效，`false` 表示無效，或 `null` 表示沒有驗證狀態
`tag-class`	`陣列` 或 `物件` 或 `字串`		套用到標籤的類別（或類別們）
`tag-pills`	`布林值`	`false`	讓內建的標籤外觀看起來像藥丸
`tag-remove-label`	`字串`	`'移除標籤'`	標籤中移除按鈕上 'aria-label' 屬性的值
`tag-removed-label` v2.5.0+	`字串`	`'已移除標籤'`	用於 aria-live 區域的標籤，會向螢幕讀取程式使用者宣告已移除的標籤
`tag-validator`	`函數`		可選標籤驗證方法。傳入一個即將被新增的標籤做為單一引數。如果標籤通過驗證，則傳回 'true'；如果無法新增標籤，則傳回 'false'
`tag-variant`	`字串`	`'次要'`	應用 Bootstrap 主題顏色變體之一至標籤
`value` v-model	`陣列`	`[]`	目前標籤的陣列。這是 v-model

`v-model`

屬性	事件
`value`	`input`

插槽

名稱	範圍	說明
`add-button-text`	否	要放置在內建的 '新增' 按鈕中的內容。優先於 'add-button-text' 屬性。當提供預設的範圍插槽時，不會使用
`預設`		覆寫標籤元件預設呈現方式的插槽

事件

事件	引數	說明
`blur`	`event` - 原生 blur 事件（在任何格式設定之前）	在元件失去焦點時發出
`focus`	`event` - 原生 focus 事件（在任何格式設定之前）	在元件獲得焦點時發出
`focusin`	`event` - 原生 focusin 事件（在任何格式設定之前）	在元件的內部元素獲得焦點時發出。
`focusout`	`event` - 原生 focusout 事件（在任何格式設定之前）	在元件的內部元素失去焦點時發出。
`input`	`value` - 目前標籤的陣列	在標籤變更時發出。更新 v-model
`tag-state`	`validTags` - 新增的（或將會新增的）新標籤陣列。如果沒有新增標籤，長度等於零 `invalidTags` - 無法添加的標籤陣列，因為它們未通過驗證。如果沒有無效標籤，長度將為零 `duplicateTags` - 無法添加的標籤陣列，因為它們將成為重複標籤。如果沒有重複標籤，長度將為零	在用戶輸入的標籤被解析時發出

`<b-form-tag>`

v2.2.0+

檢視原始碼

<b-form-tag> 元件別名
<b-form-tag> 屬性
<b-form-tag> 插槽
<b-form-tag> 事件

元件別名

<b-form-tag> 也可以透過下列別名使用

<b-tag>

注意：只有在匯入全部 BootstrapVue 或使用元件群組外掛程式時，元件別名才可用。

屬性

所有屬性的預設值皆可全域設定。

屬性	類型	預設值	說明
`disabled`	`布林值`	`false`	當設為 `true` 時，會停用元件的功能並將其置於停用狀態
`id`	`字串`		用於在呈現的內容上設定 `id` 屬性，並做為產生任何額外元素 ID 的基礎，視需要使用
`no-remove` v2.21.0+	`布林值`	`false`	設定後，標籤不會有移除按鈕
`pill`	`布林值`	`false`	讓標籤有藥丸的外觀
`remove-label`	`字串`	`'移除標籤'`	標籤中移除按鈕上 'aria-label' 屬性的值
`tag`	`字串`	`'span'`	指定 HTML 標籤來呈現，而非使用預設標籤
`title`	`字串`		要填入標籤的 'title' 屬性的值。如果沒有提供預設插槽，也會用於標籤內容
`variant`	`字串`	`'次要'`	套用 Bootstrap 主題色變體之一到元件

插槽

名稱	說明
`預設`	要放入標籤的內容。會覆寫 `title` 屬性

事件

事件	引數	說明
`remove`		當移除按鈕被點擊時發出

匯入個別元件

您可以透過以下具名稱匯出，將個別元件匯入您的專案

元件	具名稱匯出	匯入路徑
`<b-form-tags>`	`BFormTags`	`bootstrap-vue`
`<b-form-tag>`	`BFormTag`	`bootstrap-vue`

範例

import { BFormTags } from 'bootstrap-vue'
Vue.component('b-form-tags', BFormTags)

以 Vue.js 外掛程式匯入

這個外掛程式包含上面列出的所有個別元件. 外掛程式也包含任何元件別名。

具名稱匯出	匯入路徑
`FormTagsPlugin`	`bootstrap-vue`

範例

import { FormTagsPlugin } from 'bootstrap-vue'
Vue.use(FormTagsPlugin)

基本用法

使用分隔號建立標籤

透過 Backspace 按鍵移除最後一個標籤

樣式選項

與原生的瀏覽器的 <form> 送出一起使用

標籤驗證

偵測新的、無效且重複的標籤

限制標籤

透過預設涵蓋範圍的插槽自製呈現

涵蓋範圍屬性

inputAttrs 物件屬性

inputHandlers 物件屬性

使用原生瀏覽器輸入元件

使用自訂表單元件

進階自訂呈現使用

建立包裝元件

<b-form-tag> 輔助元件

元件參考

元件別名

屬性

v-model

插槽

事件

元件別名

屬性

插槽

事件

匯入個別元件

以 Vue.js 外掛程式匯入

與原生的瀏覽器的 `<form>` 送出一起使用

`inputAttrs` 物件屬性

`inputHandlers` 物件屬性

`<b-form-tag>` 輔助元件

`v-model`