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>