InputTag 标签输入

标签输入组件，支持动态添加和删除标签。

💡 使用场景：在角色管理中配置权限标识、文章管理中添加标签等。

基本用法

<template>
  <InputTag v-model="tags" />
</template>

<script setup lang="ts">
const tags = ref(['Vue', 'React', 'Angular'])
</script>

自定义配置

<template>
  <InputTag v-model="tags" :config="config" />
</template>

<script setup lang="ts">
const tags = ref([])

const config = {
  buttonAttrs: {
    btnText: '+ 添加标签',
    type: 'primary',
    size: 'small'
  },
  tagAttrs: {
    type: 'success',
    effect: 'plain'
  }
}
</script>

Props

参数	说明	类型	默认值
modelValue	标签数组（支持 v-model）	string[]	[]
config	配置项	Config	-

Config 配置

参数	说明	类型
buttonAttrs	添加按钮属性	object
buttonAttrs.btnText	按钮文本	string
inputAttrs	输入框属性	object
tagAttrs	标签属性	object

功能特性

• ✅ 双向绑定
• ✅ 动态添加标签
• ✅ 删除标签
• ✅ 自定义样式

使用场景

• 文章标签
• 技能标签
• 关键词输入

相关链接

• Element Plus Tag