Tags表单选择器(Form tags)

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

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

T带标记的输入已添加到 BootstrapVue 版本 v2.2.0 中。

基本用法

标签将删除任何开头和结尾的空格，并且不允许重复标签。默认情况下，包含空格的标签是允许的。

通过单击 Add 按钮，按 ENTER 键或在 change 事件触发新标签输入时（例如，当焦点从输入移开时）添加标签。仅当用户输入新标签值时，Add 按钮才会出现。

默认渲染：

Type a new tag and press enter

apple
orange

Value: [ "apple", "orange" ]

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

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

您可以通过 no-add-on-enter 属性在按 ENTER 时禁用添加新标签，并可以通过 add-on-change 属性在输入的 change 事件上添加标签。

使用分隔符创建标签

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

以下示例将在 SPACE ，, ，或 ; 时自动创建标签。键入：

Enter tags separated by space, comma or semicolon

Value: [ "one", "two" ]

<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
      class="mb-2"
    ></b-form-tags>
    <p>Value: {{ value }}</p>
  </div>
</template>

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

通过 backspace 按键删除最后一个标签

当设置了 remove-on-delete 属性后，当用户按下BACKSPACE（或 DEL ）并且输入值为空时，标签列表中的最后一个标签将被删除。

Enter new tags separated by space

apple
orange
grape

Press BACKSPACE to remove the last tag entered

Value: [ "apple", "orange", "grape" ]

<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
      class="mb-2"
    ></b-form-tags>
    <b-form-text id="tags-remove-on-delete-help">
      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>

样式选项

有几个属性可以用来更改默认标记接口的基本样式：

属性	描述
`tag-pills`	呈现带有胶囊外观的标签
`tag-variant`	将 Bootstrap 上下文相关主题颜色之一应用于标签
`size`	设置组件外观的大小。'sm'，'md'（默认）或'lg'
`placeholder`	新标签输入元素的占位符文本
`state`	设置控件的上下文状态。设置为 `true`（有效），`false`（无效）或 `null`
`disabled`	将组件置于禁用状态

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

组件的焦点和验证状态样式取决于 BootstrapVue 的自定义 CSS 。

Enter tags

apple
orange
grape

Value: [ "apple", "orange", "grape" ]

<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"
      class="mb-2"
    ></b-form-tags>
    <p>Value: {{ value }}</p>
  </div>
</template>

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

与本机浏览器 `<form>` 提交一起使用

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

使用 custom rendering【自定义渲染】（设置 name 属性时）也会生成隐藏的输入。

标签验证

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

您可以选择通过 tag-validator 属性提供标签验证器方法。验证器函数将接收一个参数，即正在添加的标签，并且如果标签通过验证且可以添加，则返回 true ；如果标签未通过验证，则返回 false（在这种情况下，不将其添加到标签数组中）。将向用户提供综合反馈，列出无法添加的无效标签。

标签验证仅对通过用户输入添加的标签进行。通过 v-model 对标签所做的更改未通过验证。

Tags validation example

You must provide at least 3 tags and no more than 8

Tags must be 3 to 5 characters in length and all lower case. Enter tags separated by spaces or press enter.

<template>
  <div>
    <b-form-group :state="state" label="Tags validation example" label-for="tags-validation">
      <b-form-tags
        input-id="tags-validation"
        :input-attrs="{ 'aria-describedby': 'tags-validation-help' }"
        v-model="tags"
        :state="state"
        :tag-validator="tagValidator"
        separator=" "
      ></b-form-tags>
      <!-- The following slots are for b-form-group -->
      <template v-slot:invalid-feedback>
        You must provide at least 3 tags and no more than 8
      </template>
      <template v-slot: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(newVal, oldVal) {
        // 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>

检测新的，无效的和重复的标签

每当将新标签输入到新标签输入元素中，未通过验证的标签或检测到重复的标签时，就会发出 tag-state【标签状态】事件。事件处理程序将接收三个数组作为其参数：

validTags（通过验证的标签）
invalidTags（未通过验证的标签）
duplicateTags（与现有标签或有效标签重复的标签）。

仅当新标签输入更改（输入的字符被视为标签的一部分）或用户尝试添加标签（即通过 ENTER ，单击 Add 按钮或输入分隔符）时，才会发出事件。当用户清除新标签输入元素（或仅包含空格）时，这三个数组将为空。

如果要在 <b-form-tags> 组件之外为重复和无效标签提供自己的反馈（通过使用 tag-state 事件），则可以通过设置道具重复来禁用内置重复和无效消息 duplicate-tag-text 和 invalid-tag-text（分别）为空字符串（''）或 null 。

Enter tags

Tags: []

Event values:

validTags: []
invalidTags: []
duplicateTags: []

<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-tag> 组件。

范围属性

默认作用域的插槽提供了许多属性和方法，可用于呈现自定义界面。并非所有属性或方法都需要生成界面。

默认的插槽范围属性如下：

属性	类型	描述
`tags`	Array	当前标签字符串的数组
`inputAttrs`	Object	通过 `v-bind="inputAttrs"` 应用于新标签输入元素的属性对象。详情请见下文
`inputType`	String	v2.3.0+ 要渲染的输入类型（`input-type` 属性的规范化版本）
`inputHandlers`	Object	事件处理程序的对象，可通过 `v-on="inputHandlers"` 应用于新标签输入元素。详情请见下文
`removeTag`	Function	删除标签的方法。接受一个参数，该参数是要删除的标签值
`addTag`	Function	添加新标签的方法。假定标签是输入的值，但可以选择接受一个参数，该参数是要添加的标签值
`inputId`	String	要添加到新标签输入元素的ID。默认为 `input-id` 属性。如果未提供，则会自动生成一个唯一的ID。也可以通过“inputAttrs.id”获得.
`isInvalid`	Boolean	如果用户输入包含无效标签，则为 `true`
`invalidTags`	Array	用户输入的无效标签的数组
`isDuplicate`	Boolean	如果用户输入包含重复的标签，则为 `true`
`duplicateTags`	Array	用户输入的重复标签的数组
`disableAddButton`	Boolean	如果无法添加输入中的标签（所有无效和/或重复的标签），则为 `true`
`disabled`	Boolean	如果组件处于禁用状态，则为 `true` 。`disabled` 属性的值
`state`	Boolean	组件的上下文状态。`state` 属性的值。可能的值为 `true` ，`false` 或 `null`
`size`	String	`size` 属性的值
`separator`	String	`separator` 属性的值
`placeholder`	String	`placeholder` 属性的值
`tagRemoveLabel`	String	`tag-remove-label` 属性的值。用作标签的“删除”按钮上的 `aria-label` 属性
`tagVariant`	String	`tag-variant` 属性的值
`tagClass`	String, Array, or Object	`tag-variant` 属性的值。应用于标签元素的一个或多个类
`addButtonText`	String	`add-button-text` 属性的值
`addButtonVariant`	String	`add-button-variant` 属性的值

`inputAttrs` 对象属性

The inputAttrs 对象包含用于绑定（v-bind）到新标签输入元素的属性。

属性	类型	描述
`id`	String	新标签输入的 `id` 属性
`value`	String	新标签输入的 `value` 属性
`disabled`	Boolean	新标签输入的 `disabled` 属性。`disabled` 属性的值
`form`	String	新标签输入的 `form` 属性。`form` 属性的值

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

`inputHandlers` 对象属性

inputHandlers 对象包含事件处理程序，以绑定（v-on）到新标签输入元素。

属性	类型	描述
`input`	Function	输入元素 `input` 事件的事件处理程序。接受事件对象或字符串的单个参数。更新新标签输入元素的内部v-model
`change`	Function	输入元素 `change` 事件的事件处理程序。接受事件对象或字符串的单个参数。更改将触发添加标签。
`keydown`	Function	输入元素按下 `ENTER` 和 `DEL` 事件的事件处理程序。接受一个参数，它是本地 `keydown` 事件对象

当需要 change【更改】处理程序时，必须通过 add-on-change 支持来启用它，否则它就是一个 noop 方法。

使用本地浏览器输入

范围包含可以直接绑定到本机 <input> 或 <select> 元素的属性和事件处理程序。

以下示例包括建议的 ARIA 属性和屏幕阅读器支持所需的角色。

apple
orange
banana
pear
peach

<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>

使用自定义表单组件

范围包含可以直接绑定到大多数自定义输入或选择组件的属性和事件处理程序（事件处理程序接受字符串标记值或本机事件对象）。键入任何作为字符发出 input【输入】的组件，并且（可选）在输入值更改时（即，在模糊或选择时）发出 change【更改】并使用 value 属性作为 v-model 的组件都应工作而无需进行修改。

在此示例中，我们使用 <b-form-tag> helper component【辅助组件】，但可以使用标准 HTML 或组件随意呈现标签。

apple orange banana

<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>

以下是使用自定义选择组件从一组预定义标签中进行选择的示例：

Tagged input using select

<template>
  <div>
    <b-form-group label="Tagged input using select">
      <!-- prop `add-on-change` is needed to enable adding tags vie the `change` event -->
      <b-form-tags v-model="value" size="lg" add-on-change no-outer-focus class="mb-2">
        <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 v-slot: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>

如果自定义输入使用的是模仿 input 和 change 的自定义事件名称，并且/或者需要使用 .native 修饰符进行击键，则可以执行以下类似操作来绑定事件处理程序：

<template v-slot: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 无法与您的自定义输入一起使用的情况下，或者如果您需要更好地控制标记的创建，则可以利用通过默认插槽的作用域提供的其他属性。

Disable

Duplicate tag value cannot be added again!

There are no tags specified. Add a new tag above.

<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>

以下是使用 <b-dropdown> 组件从一组预定义标签中进行选择或搜索的示例：

<template>
  <div>
    <b-form-group label="Tagged input using dropdown">
      <b-form-tags 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 v-slot:button-content>
              <b-icon icon="tag-fill"></b-icon> Choose tags
            </template>
            <b-dropdown-form @submit.stop.prevent="() => {}">
              <b-form-group
                label-for="tag-search-input"
                label="Search tags"
                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>

创建包装器组件

您可以使用首选的呈现样式轻松地创建自定义包装器组件，如下所示：

<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> 必需的 Bootstrap Vue 自定义 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 或使用组件组插件时可用。

Properties

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`input-id`	String		应用于新标签输入元素的ID。如果未提供，则会自动生成一个唯一的ID
`placeholder`	String	`'Add tag...'`	在表单控件上设置 “placeholder” 属性值
`disabled`	Boolean	`false`	设置为“true”时，禁用组件的功能并将其置于禁用状态
`name`	String		设置表单控件上“name”属性的值. When set, creates a hidden input for each tag
`form`	String		表单控件所属的表单的ID。在控件上设置“form”属性
`autofocus`	Boolean	`false`	设置为“true”时，尝试在安装控件时自动将其调焦，或者在 keep-alive【保持活动】状态时将其重新激活。未在控件上设置“autofocus”属性
`state`	Boolean		控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态
`size`	String		设置组件外观的大小。'sm'，'md'（默认）或'lg'
`input-type` v2.3.0+	String	`'text'`	指定要使用的输入类型：'text', 'email', 'tel', 'url', 或 'number'. 默认为 'text'
`input-class`	String or Array or Object		应用于新标签输入元素的一个或多个类
`input-attrs`	Object	`{}`	应用于新标签输入元素的其他属性
`add-button-text`	String	`'Add'`	内置“Add”按钮的文字。插槽“add-button-text”优先
`add-button-variant`	String	`'outline-secondary'`	将 Bootstrap 主题颜色变体之一应用于“Add”按钮
`tag-variant`	String	`'secondary'`	将 Bootstrap 主题颜色变量之一应用于标签
`tag-class`	String or Array or Object		应用于标签的一个或多个类
`tag-pills`	Boolean	`false`	使内置标签具有胶囊外观
`tag-remove-label`	String	`'Remove tag'`	标签中“删除”按钮上“aria-label”属性的值
`tag-removed-label` v2.5.0+	String	`'Tag removed'`	aria-live 区域的标签，向屏幕阅读器用户宣布已删除标签
`tag-validator`	Function		可选的标签验证器方法。传递了要添加标签的单个参数。如果标签通过验证，则应返回“true”；如果无法添加标签，则应返回“false”
`duplicate-tag-text`	String	`'Duplicate tag(s)'`	检测到重复标签时的消息。设置为空字符串以禁用该消息
`invalid-tag-text`	String	`'Invalid tag(s)'`	检测到无效标签时的错误消息。设置为空字符串以禁用该消息
`separator`	String or Array		将触发标签创建的分隔符
`remove-on-delete`	Boolean	`false`	设置后，当用户按下 Delete 或 Backspace 并且输入为空时，启用删除标签中的最后一个标签
`add-on-change`	Boolean	`false`	设置后，启用在输入的“change”事件上添加标签
`no-add-on-enter`	Boolean	`false`	设置后，禁用在输入的'keydown.enter'事件上添加标签
`no-outer-focus`	Boolean	`false`	设置时，禁用组件根元素的焦点样式
`value` v-model	Array	`[]`	当前标签数组。这是v-model

v-model

属性	事件
`value`	`input`

插槽

插槽名称	描述	范围
`add-button-text`	要放置在内置“Add”按钮中的内容。优先于“add-button-text”属性。提供默认作用域的插槽时不使用
`default`	插槽以覆盖标签组件的默认呈现

事件

事件	参数	描述
`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-tag>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`variant`	String	`'secondary'`	将 Bootstrap 主题颜色变量之一应用于组件
`disabled`	Boolean	`false`	设置为“true”时，禁用组件的功能并将其置于禁用状态
`title`	String		放置在标签的“title”属性中的值。如果未提供默认位置，也将用于标签内容
`pill`	Boolean	`false`	使标签具有胶囊外观
`remove-label`	String	`'Remove tag'`	标签中“删除”按钮上“aria-label”属性的值
`tag`	String	`'span'`	指定要呈现的 HTML 标签，而不是默认标签

事件

事件	参数	描述
`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)

Tags表单选择器(Form tags)

基本用法

使用分隔符创建标签

通过 backspace 按键删除最后一个标签

样式选项

与本机浏览器 <form> 提交一起使用

标签验证

检测新的，无效的和重复的标签

使用默认范围的插槽自定义呈现

范围属性

inputAttrs 对象属性

inputHandlers 对象属性

使用本地浏览器输入

使用自定义表单组件

高级自定义渲染用法

创建包装器组件

<b-form-tag> 辅助组件

组件引用

组件别名

Properties

v-model

插槽

事件

组件别名

属性

事件

导入单个组件

导入为Vue.js插件

与本机浏览器 `<form>` 提交一起使用

`inputAttrs` 对象属性

`inputHandlers` 对象属性

`<b-form-tag>` 辅助组件