Vue 3 的多功能标签输入组件 - tag-input

Vue 3 的多功能标签输入组件 - tag-input
插件名称 tag-input
发布时间 2021年7月14日
插件作者 mayank1513

使用 Vue 3 Composition API 构建的多功能且可自定义的标签输入。

安装和下载:

# Yarn
$ yarn add @mayank1513/tag-input

# NPM
$ npm i @mayank1513/tag-input --save

使用

1、安装并导入标签输入组件。

import TagInput from '@mayank1513/tag-input'
import '@mayank1513/tag-input/dist/TagInput.css'

2. 在模板中添加一个基本的标签输入组件。

<template>
  <tag-input v-model="tags" />
</template>
export default {
  name: 'App',
  data() {
    return {
      tags: [],
    };
  },
  components: {
    TagInput,
  },
}

3.所有默认组件道具。

name: { type: String, default: "" },
modelValue: { type: Array, default: () => [] },
options: { type: Array, default: () => [] },
allowCustom: { type: Boolean, default: true },
showCount: { type: Boolean, default: false },
tagTextColor: { type: String, default: "white" },
tagBgColor: { type: String, default: "rgb(250, 104, 104)" },
tagClass: { type: String, default: "" },
customDelimiter: {
  type: [String, Array],
  default: () => [],
  validator: (val) => {
    if (typeof val == "string") return val.length == 1;
    for (let i = 0; i < val.length; i++) {
      if (typeof val[i] != "string" || val[i].length != 1) return false;
    }
    return true;
  },
},