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 发生变化时触发