vue-tags-input组件使用指南

时间 2020-05-15

标签 vue tags input 组件使用指南繁體版

原文原文链接

A tags input component for VueJScss

前言

在开发xxx管理系统过程当中，发现有多处须要用到在input输入框中输入标签的需求，因而提取关键词vue input tags搜索了相关组件，最后发现@johmun/vue-tags-input体积小，易上手，功能丰富，更能知足业务需求和后续可能的需求变动。因而总结了该组件的使用方法，方便学习和后续开发须要。html

官方文档

特色

无需安装其余依赖
体积小：34kb minified (css included) | gzipped 9kb
快速上手
添加以后能够编辑
使用删除键删除标签
经过粘贴添加标签
钩子函数：添加以前/删除以前
自定义验证规则
丰富的自定义配置
自定义模版
自动补全
文档清晰，示例丰富

安装

npm

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

CDN

经过CDN引入vue-tags-input时，会自动注册为vue全局组件。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两个基础属性。git

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

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

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