vlambda博客
学习文章列表

本文转载于 SegmentFault 社区

A tags input component for VueJS

前言

在开发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

通过CDN引入vue-tags-input时，会自动注册为vue全局组件。

 
   
   
 

  
    
    
  
 
   
 
  
  
    
    
  
<script ></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>
 
   
   
 

验证规则

添加自定义验证规则，需要设置validation属性，validation值是数组类型，每一个元素都是一个对象，包含classes和rule两个基础属性。

rule可以是正则，也可以是函数。当输入的文本匹配上对应的验证规则时，classes会被添加到标签对应的元素CSS class上。验证通过，则会自动添加ti-validCSS class，否则会自动添加ti-invalid。

默认地，验证不通过的标签也会被添加到已添加的标签数组中。如果验证规则中包含disableAdd: true属性，则验证不通过的标签不会被添加。

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
<template> <vue-tags-input v-model="tag" :tags="tags" :validation="validation" @tags-changed="newTags => tags = newTags" /></template><script>import VueTagsInput from '@johmun/vue-tags-input';
export default { components: { VueTagsInput, }, data() { return { // 当前编辑的标签 tag: '', // 已添加的标签 tags: [], // 验证规则 validation: [{ classes: 'min-length', rule: tag => tag.text.length < 8, }, { classes: 'no-numbers', rule: /^([^0-9]*)$/, }, { classes: 'avoid-item', rule: /^(?!Cannot).*$/, disableAdd: true, }, { classes: 'no-braces', rule: ({ text }) => text.indexOf('{') !== -1 || text.indexOf('}') !== -1 }] }; }};</script>
 
   
   
 

钩子函数

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
<template> <vue-tags-input v-model="tag" :tags="tags" @before-adding-tag="checkTag" @tags-changed="newTags => tags = newTags" /></template><script>import VueTagsInput from '@johmun/vue-tags-input';
export default { components: { VueTagsInput, }, data() { return { // 当前编辑的标签 tag: '',
 // 已添加的标签 tags: [] }; }, methods: { checkTag(obj) { // 添加之前验证输入的文本是否包含字符'e' if (obj.tag.text.includes('e')) { // 如果包含，则显示警告提示 alert('Letter "e" is forbidden'); } else { // 如果不包含，则添加标签 obj.addTag(); } } }};</script>
 
   
   
 

属性配置

简单封装

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
<template> <vue-tags-input v-model.trim="tag" :tags="tags" :max-tags="maxTags" :placeholder="placeholder" :separators="separators" @before-adding-tag="beforeAddingTag" @before-deleting-tag="boforeDeletingTag" @tags-changed="newTags => $emit('update:tags', newTags)" /></template>
<script>import VueTagsInput from "@johmun/vue-tags-input";
export default { name: "BaseInputTags", components: { VueTagsInput }, props: { tags: { type: Array, default() { return []; } }, placeholder: { type: String, default: "请输入标签" }, maxTags: { type: Number, default: 100 }, beforeAddingTag: { type: Function, default: obj => obj.addTag() }, beforeDeletingTag: { type: Function, default: obj => obj.deleteTag() } }, data() { return { tag: "", separators: [";", ",", "，"] }; }};</script>
 
   
   
 

调用

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
<template> <base-input-tags :tags.sync="tags" /></template><script> import BaseInputTags from "@/components/base/BaseInputTags" export default { components: { BaseInputTags }, data() { return { tags: [] } } }</script>
 
   
   
 

- END -