vue-tags-input组件使用指南(推荐)

前言

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

验证规则

添加自定义验证规则，需要设置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>

总结

到此这篇关于vue-tags-input组件使用指南的文章就介绍到这了,更多相关vue tags input组件使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！