Vue Tags Input

Vue Tags Input

参考地址：http://www.vue-tags-input.com/#/
1.安装依赖

npm install @johmun/vue-tags-input

2.使用

<template>
  <div>
  <el-form-item label="博主链接" prop="url">
        <div>
          <vue-tags-input
            v-model="tag"
            :tags="tags"
            @tags-changed="newTags => tags = newTags"
            placeholder="请填写博主链接"
          />
        </div>
      </el-form-item>
  </div>
</template>

<script>
import VueTagsInput from '@johmun/vue-tags-input';

export default {
  components: {
    VueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],
    };
  },
  methods：{
  submitForm： function(formName){
     var arr = [];
      for (var i = 0; i < this.tags.length; i++) {
        arr.push(this.tags[i].text);
      }
      console.log(arr)//传给后台的数据处理一下， v-model="tag"的数据变成标签时为空取不到，
  }
  }
};
</script>

效果是这样子的：
（标签的样式自己添加覆盖框架本身的样式）

如果是将标签用字符，号拼接传给后台时

 for (var i = 0; i < this.tags.length; i++) {
              arr.push(this.tags[i].text);
            }
            for (var i = 0; i < arr.length; i++) {
              str += arr[i] + ",";
            }
            if (str.length > 0) {
              str = str.substr(0, str.length - 1);
            }
            console.log(str)//用，号拼接传给后台

编辑回显时要还原格式，不然会报Invalid prop: custom validator check failed for prop “tags”.这个错

 let arr = str.split(",");  //str是，号拼接返回来的数据
      let all = [];
      for (var i = 0; i < arr.length; i++) {
        all.push({ text: arr[i] });    //必须将它还原成[{text:'data1'},{text:'data2}]这种格式
      }
      this.tags = all;