vue3-tags-input
这是基于 vue3 的 tags 输入框
示例
<template>
<div class="w-[600px]">
<TagInput
v-model:value="tags"
placeholder="请输入"
:check-tag="handleCheckTag"
:disabled="false"
>
</TagInput>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import TagInput from "vue-tags-input"
const tags = ref<string[]>([])
// 错误校验示例
const handleCheckTag = (value: string) => {
if (tags.value.includes(value)) {
return Promise.reject("tag已存在")
}
return Promise.resolve("")
}props
value: string[] // tags 值
placeholder: string // 无内容时的提示信息 默认： 请输入
disabled: boolean // 是否禁用 默认 false
check-tag: () => Promise< T > //可选配置 进行错误校验 Promist.reject('这个时错误提示信息') 仅仅 Promise.resolve() 通过校验
emit
change: (tags: string[]) => void // tag 发生变化时触发