表单标签

轻量级自定义标记输入表单控件，具有自定义界面渲染、重复标记检测和可选标记验证的选项。

自 v2.2.0 起在 BootstrapVue 中可用

标签是短字符串数组，用于各种方式，例如分配类别。使用默认用户界面，或通过使用默认作用域插槽创建自己的自定义界面。

基本用法

标签将删除所有前导和尾随空格，并且不允许重复标签。默认情况下允许包含空格的标签。

通过单击添加按钮、按下 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 属性禁用在按下 Enter 时添加新标签，并通过 add-on-change 属性启用在输入的 change 事件上添加标签。

使用分隔符创建标签

要在键入分隔符（即 空格、, 等）时自动创建标签，请将 separator 属性设置为将触发添加标签的字符。如果需要多个分隔符，则将它们包含为单个字符串（即 ' ,;'），或字符数组（即 [' ', ',', ';']），这将在键入 空格、,、或 ; 时触发添加新标签。分隔符必须是单个字符。

以下示例将在键入 空格、, 或 ; 时自动创建标签

<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，并且用户按下 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 -->

样式选项

有几个属性可用于更改默认标记界面的基本样式

属性	说明
`tag-pills`	以药丸形式呈现标签
`tag-variant`	将 Bootstrap 上下文变体主题颜色应用于标签
`size`	设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`placeholder`	新标签输入元素的占位符文本
`state`	设置控件的上下文状态。设置为 `true`（有效）、`false`（无效）或 `null`
`disabled`	使组件处于禁用状态

有关其他属性，请参阅本页底部的组件参考部分。

组件的焦点和验证状态样式依赖于 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>` 提交配合使用

除非您通过 name 属性提供名称，否则标记输入的值不会通过标准表单 action 提交。提供名称时，<b-form-tags> 将为每个标签创建一个隐藏的 <input>。隐藏输入的 name 属性将设置为 name 属性的值。

使用自定义呈现时（设置 name 属性时），也将生成隐藏输入。

标签验证

默认情况下，<b-form-tags> 检测用户尝试输入（区分大小写）重复标签的情况，并向用户提供集成反馈。

您还可以通过 tag-validator 属性提供标签验证器方法。验证器函数将接收一个参数，即正在添加的标签，并应返回 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`	对象	事件处理程序对象，通过 `v-on="inputHandlers"` 应用于新标签输入元素。有关详细信息，请参见下文
`inputId`	字符串	要添加到新标签输入元素的 ID。默认为属性 `input-id`。如果未提供，则自动生成一个唯一的 ID。也可通过 'inputAttrs.id' 获得
`inputType`	字符串	v2.3.0+ 要渲染的输入类型（属性 `input-type` 的标准化版本）
`invalidTagText`	字符串	`invalid-tag-text` 属性的值
`invalidTags`	数组	用户输入的无效标签数组
`isDuplicate`	布尔值	如果用户输入包含重复标签，则为 `true`
`isInvalid`	布尔值	如果用户输入包含无效标签，则为 `true`
`isLimitReached`	布尔值	v2.17.0+ 如果配置了 `limit` 并且标签数量已达到限制，则 `true`
`limitTagsText`	字符串	v2.17.0+ `limit-tags-text` 属性的值
`limit`	字符串	v2.17.0+ `limit` 属性的值
`noTagRemove`	布尔值	v2.21.0+ `no-tag-remove` 属性的值
`placeholder`	字符串	`placeholder` 属性的值
`removeTag`	函数	删除标签的方法。接受一个参数，即要删除的标签值
`required`	布尔值	v2.20.0+ `required` 属性的值
`separator`	字符串	`separator` 属性的值
`size`	字符串	`size` 属性的值
`state`	布尔值	组件的上下文状态。 `state` 属性的值。可能的值为 `true`、`false` 或 `null`
`tagClass`	字符串、数组或对象	`tag-variant` 属性的值。应用于标签元素的类（或类）
`tagPills`	布尔值	`tag-pills` 属性的值
`tagRemoveLabel`	字符串	`tag-remove-label` 属性的值。用作标签删除按钮上的 `aria-label` 属性
`tagVariant`	字符串	`tag-variant` 属性的值
`tags`	数组	当前标签字符串数组

`inputAttrs` 对象属性

inputAttrs 对象包含要绑定 (v-bind) 到新标签输入元素的属性。

属性	类型	说明
`disabled`	布尔值	`disabled` 属性，用于新标签输入。 `disabled` 属性的值
`form`	字符串	`form` 属性，用于新标签输入。 `form` 属性的值
`id`	字符串	`id` 属性，用于新标签输入
`value`	字符串	`value` 属性，用于新标签输入

inputAttrs 对象还将包括通过 input-attrs 属性设置的任何属性。请注意，上述属性优先于 input-attrs 属性中指定的任何相同属性。

`inputHandlers` 对象属性

inputHandlers 对象包含要绑定到新标签输入元素的事件处理程序 (v-on)。

属性	类型	说明
`change`	函数	输入元素 `change` 事件的事件处理程序。接受单个参数，该参数可以是事件对象或字符串。Change 将触发添加标签。
`input`	函数	输入元素 `input` 事件的事件处理程序。接受单个参数，该参数可以是事件对象或字符串。更新新标签输入元素的内部 v-model
`keydown`	函数	输入元素 `keydown` `Enter` 和 `Del` 事件的事件处理程序。接受单个参数，该参数是本机 keydown 事件对象

在需要时，change 处理程序必须通过 add-on-change 属性启用，否则它将是一个 noop 方法。

使用本机浏览器输入

范围包含可直接绑定到本机 <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（可选），并使用 prop 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 的自定义事件名称，和/或需要 .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`	设置后，启用在输入的“更改”事件中添加标签
`autofocus`	`布尔值`	`false`	设置为 `true` 时，尝试在控件挂载时自动聚焦该控件，或在保持活动状态下重新激活该控件。不会在控件上设置 `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+	`Array` 或 `String`	`'.b-form-tag button input select'`	通过 CSS 选择器忽略单击以聚焦输入例程的某些元素
`input-attrs`	`对象`	`{}`	要应用于新标签输入元素的其他属性
`input-class`	`Array` 或 `Object` 或 `String`		要应用于新标签输入元素的类（或类）
`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`	`字符串`		设置表单控件上“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`	`Array` 或 `String`		将“required”属性添加到表单控件
`size`	`字符串`		设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`state`	`布尔值`	`将触发创建标签的分隔符字符`	null
`控制组件的验证状态外观。对于有效状态为“true”，对于无效状态为“false”，对于无验证状态为“null”`	`Array` 或 `Object` 或 `String`		tag-class
`tag-pills`	`布尔值`	`false`	应用于标签的类（或类）
`使内置标签具有药丸外观`	`字符串`	`tag-remove-label`	'删除标签'
`标签中删除按钮上的“aria-label”属性的值` tag-removed-label	`字符串`	`v2.5.0+`	'已删除标签'
`aria-live 区域的标签，用于向屏幕阅读器用户宣布已删除的标签`	`函数`		tag-validator
`tag-variant`	`字符串`	`可选标签验证器方法。传递一个正在添加的标签的单个参数。如果标签通过验证，则应返回“true”，如果不能添加标签，则应返回“false”`	'secondary'
`value` 将 Bootstrap 主题颜色变体之一应用于标签	`数组`	`[]`	v-model

当前标签的数组。这是 v-model

属性	`v-model`
`value`	`input`

事件

插槽	名称	说明
`add-button-text`	作用域	否
`要放置在内置“添加”按钮中的内容。优先于“add-button-text”属性。在提供默认作用域插槽时不使用`		显示作用域

用于覆盖标签组件的默认渲染的插槽

`v-model`	参数	说明
`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`	`字符串`	`tag-remove-label`	'删除标签'
`tag`	`字符串`	`'span'`	指定要呈现的 HTML 标签，而不是默认标签
`title`	`字符串`		要放置在标签的“title”属性中的值。如果没有提供默认插槽，也将用于标签内容
`variant`	`字符串`	`可选标签验证器方法。传递一个正在添加的标签的单个参数。如果标签通过验证，则应返回“true”，如果不能添加标签，则应返回“false”`	将 Bootstrap 主题颜色变体之一应用于组件

插槽

插槽	说明
`要放置在内置“添加”按钮中的内容。优先于“add-button-text”属性。在提供默认作用域插槽时不使用`	要放置在标签中的内容。覆盖 `title` 属性

事件

`v-model`	参数	说明
`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>` 辅助组件