vue-tags-input组件使用指南

本文主要是介绍vue-tags-input组件使用指南，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

钩子函数

钩子函数	参数	描述
before-adding-tag	Object {tag: Object, addTag: Function}	添加标签之前触发，如果调用obj.addTag()，则添加标签，否则不添加
before-deleting-tag	Object {tag: Object, index: Number, deleteTag: Function}	删除标签之前触发，如果调用obj.deleteTag()，则删除标签，否则不删除

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

属性配置

属性名	说明	类型	默认值
add-from-paste	是否可以通过粘贴文本到input控件中来添加标签	Boolean	true
add-on-blur	当input控件中有值并且失去焦点时，是否自动添加标签	Boolean	true
add-on-key	触发添加标签的keyCode或者字符，默认按enter键添加	Array	[13]
allow-edit-tags	是否允许编辑已添加的标签	Boolean	false
avoid-adding-duplicates	是否禁止添加重复的标签	Boolean	true
delete-on-backspace	是否可以按delete键删除标签	Boolean	true
max-tags	可以添加的最大标签数	Number	-
maxlength	input可以输入的最大字符数	Number	-
separators	定义分割一串字符串成多个标签的分隔符，默认为分号	Array	[";"]
validation	自定义验证规则，可以包含classes和rule，disableAdd基础属性，也可以包含自定义属性	Array [{classes: String, rule: RegExp/Function, disableAdd: Boolean}]	[ ]

简单封装

<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组件使用指南的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！