vue TagsInput

分享这款最近在写项目用到的一个插件

在开发 xxx 管理系统过程中，发现有多处需要用到在 input 输入框中输入标签的需求，于是提取关键词 vue input tags 搜索了相关组件，最后发现 @johmun/vue-tags-input 体积小，易上手，功能丰富，更能满足业务需求和后续可能的需求变更

官方文档

• http://www.vue-tags-input.com
• https://github.com/JohMun/vue-tags-input
• https://www.npmjs.com/package/@johmun/vue-tags-input

特点

• 无需安装其他依赖
• 体积小：34kb minified (css included) | gzipped 9kb
• 更容易上手操作简单可以实现编辑删除功能
• 可以通过粘贴添加标签
• 钩子函数：添加之前 / 删除之前
• 自定义验证规则
• 丰富的自定义配置
• 自定义模版
• 自动补全
• 文档清晰，示例丰富

安装
NPM

npm install @johmun/vue-tags-input --save

CDN

<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

用法

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>
</template>

<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
  components: {
    VueTagsInput,
  },
  data() {
    return {
      tag:'',
      tags: [],
    };
  },
};
</script>
<style scoped style="scss"></style>