tags-input-easy

简介

该组件提供了一个灵活的标签输入界面，允许用户添加、删除和查看标签。它支持多种配置选项，如过滤重复标签、自定义分隔符以及只读模式等。此外，每个标签都包含一个关闭按钮，方便用户移除标签。

安装

你可以通过 npm 或 yarn 安装此组件：
npm install tags-input-easy
yarn add tags-input-easy

使用示例

import TagsInput from 'tags-input-esay'
<TagsInput @click="click" v-model:list="tags" :on-delete="customDelete" />
const tags = ref(['tag1', 'tag2', 'tag3']);

自定义删除函数
const customDelete = (tag, callback) => {
  console.log('Custom delete:', tag);
  // 执行自定义删除逻辑
  // 调用回调函数以删除标签
  callback();
};
const click = tag =>{
	console.log(tag)
}

属性

| 属性名 | 类型 | 默认值 | 描述 | | ------------- | ----------------- | -------------------------------- | --------------------------------------------------- | | isFilter | Boolean | false | 是否启用过滤重复标签。 | | placeholder | String | "输入关键词,输入后Enter键添加" | 输入框的占位符文本。 | | list | [Array, String] | 必填 | 标签列表，可以是数组或字符串。 | | strType | String | null | 当 list 是字符串时，用于分割字符串的分隔符。 | | view | Boolean | false | 是否只读模式。 | | warning | Boolean | false | 是否显示重复标签的警告消息。 | | onDelete | Function | null | 自定义删除函数，接受两个参数：tag 和 callback。 |

事件

| 事件名 | 参数 | 描述 | | ------------- | --------- | -------------------------------------------- | | update:list | newList | 当标签列表发生变化时触发，返回新的标签列表。 | | tagClose | tag | 当标签被关闭时触发，返回被关闭的标签。 | | click | tag | 标签点击事件 |