1. 程式人生 > 程式設計 >vue-tags-input元件使用指南(推薦)

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值是陣列型別,每一個元素都是一個物件,包含classesrule兩個基礎屬性。

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,},// 已新增的標籤
   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,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元件使用指南的文章就介紹到這了,更多相關vue tags input元件使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!