BizTagInput 标签输入

输入回车 / 逗号 / 失焦确认为标签：去重提示（allow-duplicate 放开）、数量上限、单条长度截断。商品关键词、工单标签、系统别名维护等「字符串数组字段」的表单录入标准件。

基础用法

线上促销节假日活动

当前 2 个：线上促销、节假日活动

回车确认、× 删除、add / remove 事件逐条触发；失焦自动确认未提交的输入。

<script setup lang="ts">
/** 基础用法：回车确认、× 删除、失焦自动确认 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizTagInput } from 'vue3-ep-biz-lib'

const tags = ref(['线上促销', '节假日活动'])

const onAdd = (tag: string): void => {
  ElMessage.success(`新增标签：${tag}`)
}

const onRemove = (tag: string): void => {
  ElMessage.info(`移除标签：${tag}`)
}
</script>

<template>
  <div style="max-width: 480px">
    <BizTagInput v-model="tags" @add="onAdd" @remove="onRemove" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      当前 {{ tags.length }} 个：{{ tags.join('、') }}
    </div>
  </div>
</template>

显示代码

关键词上限与去重

变频空调一级能效壁挂式

3 / 6 —— 达上限后输入框收起；单条超 10 字自动截断；重复词提示已存在

max 限 6 个（达上限收起输入框）、重复词拦截提示——投放关键词的典型约束。

<script setup lang="ts">
/** 场景：投放关键词——上限 6 个 + 重复拦截 */
import { ref } from 'vue'
import { BizTagInput } from 'vue3-ep-biz-lib'

const keywords = ref(['变频空调', '一级能效', '壁挂式'])
</script>

<template>
  <div style="max-width: 480px">
    <BizTagInput v-model="keywords" :max="6" :maxlength="10" placeholder="输入关键词回车，最多 6 个" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      {{ keywords.length }} / 6 —— 达上限后输入框收起；单条超 10 字自动截断；重复词提示已存在
    </div>
  </div>
</template>

显示代码

预选建议

常用标签 +

外层组合 ElDropdown 提供常用标签一键录入，自定义输入仍然可用。

<script setup lang="ts">
/** 场景：预选建议——常用标签下拉一键录入，自定义输入仍可用 */
import { ref } from 'vue'
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'
import { BizTagInput } from 'vue3-ep-biz-lib'

const tags = ref<string[]>([])
const presets = ['紧急', '高优先级', '待验证', '已复现', '客户催办', '需回归']

const addPreset = (tag: string): void => {
  if (tags.value.includes(tag)) return
  if (tags.value.length >= 8) return
  tags.value = [...tags.value, tag]
}
</script>

<template>
  <div style="max-width: 480px; display: flex; flex-direction: column; gap: 8px">
    <ElDropdown trigger="click">
      <span style="font-size: 13px; color: var(--el-color-primary); cursor: pointer">常用标签 +</span>
      <template #dropdown>
        <ElDropdownMenu>
          <ElDropdownItem v-for="preset in presets.filter((p) => !tags.includes(p))" :key="preset" @click="addPreset(preset)">
            {{ preset }}
          </ElDropdownItem>
        </ElDropdownMenu>
      </template>
    </ElDropdown>
    <BizTagInput v-model="tags" :max="8" placeholder="选择常用标签或输入自定义标签" />
  </div>
</template>

显示代码

别名回显维护

人事系统HR

试试粘贴「eHR,人事平台,员工中心」——逗号自动逐条确认；单条超 8 字截断

初始值回显、maxlength 超长自动截断、逗号粘贴批量拆分。

<script setup lang="ts">
/** 场景：系统别名维护——初始回显、超长截断、逗号粘贴批量拆分 */
import { ref } from 'vue'
import { BizTagInput } from 'vue3-ep-biz-lib'

const aliases = ref(['人事系统', 'HR'])
</script>

<template>
  <div style="max-width: 480px">
    <BizTagInput v-model="aliases" :maxlength="8" placeholder="输入别名回车；可粘贴「a,b,c」批量" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      试试粘贴「eHR,人事平台,员工中心」——逗号自动逐条确认；单条超 8 字截断
    </div>
  </div>
</template>

显示代码

表单必填校验

知识标签

前端

作为 el-form 字段：至少 1 个标签的必填校验（错误提示与清空重验）。

<script setup lang="ts">
/** 场景：表单必填校验——至少 1 个标签，清空后重新校验 */
import { reactive, ref } from 'vue'
import { ElButton, ElForm, ElFormItem, ElMessage } from 'element-plus'
import { BizTagInput } from 'vue3-ep-biz-lib'

import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()
const form = reactive({ tags: ['前端'] })

const rules: FormRules = {
  tags: [
    {
      required: true,
      validator: (_rule, value: string[], callback) => {
        if (value === undefined || value.length === 0) callback(new Error('至少添加一个标签'))
        else callback()
      },
      trigger: 'change',
    },
  ],
}

const onSubmit = (): void => {
  formRef.value?.validate((valid) => {
    if (!valid) return
    ElMessage.success(`保存成功：${form.tags.join('、')}`)
  })
}
</script>

<template>
  <div style="max-width: 480px">
    <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px">
      <ElFormItem label="知识标签" prop="tags">
        <BizTagInput v-model="form.tags" :max="5" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="onSubmit">保存</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

受控操作

白名单

父级直接改 v-model 即可增删（按钮批量打标 / 清空），组件保持纯受控。

<script setup lang="ts">
/** 场景：受控操作——父级直接改 v-model 批量打标 / 清空 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizTagInput } from 'vue3-ep-biz-lib'

const tags = ref(['白名单'])

const batchTag = (): void => {
  tags.value = [...tags.value, '内网', '免审计', '双因子']
}

const clearAll = (): void => {
  tags.value = []
  ElMessage.info('已清空')
}
</script>

<template>
  <div style="max-width: 480px; display: flex; flex-direction: column; gap: 8px">
    <BizTagInput v-model="tags" />
    <div style="display: flex; gap: 8px">
      <ElButton size="small" @click="batchTag">批量打标</ElButton>
      <ElButton size="small" type="danger" plain @click="clearAll">清空</ElButton>
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string[]	[]	标签数组
placeholder	string	'输入后回车确认'	占位提示（达上限后隐藏输入框）
max	number	—	数量上限
maxlength	number	—	单个标签最大长度（超出截断）
allow-duplicate	boolean	false	允许重复标签（默认重复时提示）
comma-confirm	boolean	true	逗号作为确认符（粘贴批量拆分）
disabled	boolean	false	禁用（只读回显）

Events

事件名	参数	说明
update:model-value / change	(value: string[])	标签集合变更
add	(tag: string)	新增单条
remove	(tag: string, index: number)	删除单条

Slots

插槽名	说明
—	无自定义插槽

Expose

属性/方法	说明
focus()	聚焦输入框