InputTag 标签输入框

允许用户通过输入并回车快速添加标签，常用于关键词、邀请人等场景。

import { createApp } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElInputTag)

基础用法

输入内容后按回车即可添加为标签。

<template>
  <el-input-tag v-model="tags" placeholder="请输入后按 Enter" style="width: 300px" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'


const tags = ref<string[]>(['DHdesign', 'Element Plus'])
</script>

自定义触发器

通过 trigger 自定义添加标签的按键，默认值为 Enter，也支持 Space。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-input-tag v-model="tags1" trigger="Enter" placeholder="Enter 触发" style="width: 100%" />
    <el-input-tag v-model="tags2" trigger="Space" placeholder="Space 触发" style="width: 100%" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'


const tags1 = ref<string[]>([])
const tags2 = ref<string[]>([])
</script>

最大标签数

通过 max 限制可添加的标签数量，达到上限后将无法继续输入。

<template>
  <el-input-tag v-model="tags" :max="3" placeholder="最多 3 个标签" style="width: 320px" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'


const tags = ref<string[]>(['前端', '设计'])
</script>

折叠标签

通过 collapse-tags 将多余标签合并为一个占位，配合 collapse-tags-tooltip 可在悬停时展开。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-input-tag v-model="tags" collapse-tags placeholder="折叠" style="width: 100%" />
    <el-input-tag
      v-model="tags"
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="2"
      placeholder="折叠 + tooltip"
      style="width: 100%"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'


const tags = ref<string[]>(['Vue', 'Vite', 'Pinia', 'DHdesign'])
</script>

尺寸

通过 size 属性切换 large / default / small 三种尺寸。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-input-tag v-model="tags" size="large" placeholder="large" style="width: 100%" />
    <el-input-tag v-model="tags" placeholder="default" style="width: 100%" />
    <el-input-tag v-model="tags" size="small" placeholder="small" style="width: 100%" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'


const tags = ref<string[]>(['标签'])
</script>

可清空与禁用

通过 clearable 显示清空按钮，通过 disabled 禁用整个组件。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-input-tag v-model="tags1" clearable placeholder="可清空" style="width: 100%" />
    <el-input-tag v-model="tags2" disabled placeholder="禁用" style="width: 100%" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputTag as ElInputTag } from '@szhn/dh-design-pc'


const tags1 = ref<string[]>(['DHdesign', 'UI'])
const tags2 = ref<string[]>(['禁用', '标签'])
</script>

API

Attributes

属性	说明	类型	默认值
model-value / v-model	标签数组	string[]	—
max	最大标签数	number	—
trigger	触发添加的按键	Enter / Space	Enter
size	尺寸	large / default / small	—
tag-type	标签类型	enum	info
tag-effect	标签效果	light / dark / plain	light
draggable	标签是否可拖拽	boolean	false
clearable	是否可清空	boolean	false
disabled	是否禁用	boolean	false
collapse-tags	是否折叠标签	boolean	false
max-collapse-tags	折叠时展示的标签数	number	1
delimiter	分隔符触发添加	string / RegExp	—

Events

事件	说明
change	值变化
add-tag / remove-tag	添加 / 移除标签
clear	点击清除按钮
focus / blur	获焦 / 失焦

更多 API 请参考 Element Plus InputTag 文档。