标签输入 InputTag

用于输入和管理多个标签，支持回车添加、标签折叠、禁用等功能。

基础用法

通过 v-model 绑定标签数组，输入后回车添加标签，点击关闭按钮或按 Backspace 删除。

tag1

tag2

Add a tag

<template>
  <bp-input-tag placeholder="Add a tag" v-model="val" style="width: 280px"></bp-input-tag>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const val = ref<string[]>(["tag1", "tag2"]);
</script>

标签折叠

通过 max-tag-count 属性限制最多显示的标签数量，超出部分显示为 +N...。

最多显示 3 个标签

Vue

React

Angular

+1...

回车添加

全部标签：[ "Vue", "React", "Angular", "Svelte" ]

最多显示 2 个标签

标签A

标签B

+1...

回车添加

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">最多显示 3 个标签</div>
      <bp-input-tag v-model="val" :max-tag-count="3" placeholder="回车添加" style="width: 280px" />
      <div class="value">全部标签：{{ val }}</div>
    </div>
    <div>
      <div class="label">最多显示 2 个标签</div>
      <bp-input-tag v-model="val2" :max-tag-count="2" placeholder="回车添加" style="width: 280px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref(["Vue", "React", "Angular", "Svelte"]);
const val2 = ref(["标签A", "标签B", "标签C"]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

禁用

通过 disabled 属性禁用输入，已有的标签仍会显示但不可删除。

正常

Vue

React

回车添加

禁用

Vue

React

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">正常</div>
      <bp-input-tag v-model="val" placeholder="回车添加" style="width: 280px" />
    </div>
    <div>
      <div class="label">禁用</div>
      <bp-input-tag v-model="val" disabled style="width: 280px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref(["Vue", "React"]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

InputTag 属性

v-model	绑定值	Array	-	-
id	输入框 ID	String	-	-
name	输入框名称	String	-	-
placeholder	占位文本	String	-	-
disabled	是否禁用	Boolean	-	-
max-tag-count	最多显示数量	Number	-	-

InputTag 事件

add	添加标签触发	value: String	-
remove	删除标签触发	value: String, index: Number	-