import Tag from "vue2-tag"
Vue.use(Tag)

<tag
       :tags="sizeForm.tags"
       :add-tag="addTag"
       :delete-tag="deleteTag" 
></tag>

<script>
export default {,
  data() {
    return {
      sizeForm: {
        // 数据源  
        tags: [],
      },
    };
  },
  methods: {
    // 添加 tag
    addTag(tag, callback) {
      if (!tag) {
        // 当重复添加时调用这个回调用来提示用户  
        callback(() => {
          // 这里的提示信息可以按照您使用的UI框架决定  
          this.$message({
            type: "error",
            message: `标签不能重复`,
          });
        });
      } else {
        // 将新增的tag追加到数组中  
        this.sizeForm.tags.push(tag);
      }
    },
    // 删除 tag
    deleteTag(tagIndex) {
      this.sizeForm.tags.splice(tagIndex, 1);
    },
  },
};
</script>

<tag
    :tags="sizeForm.tags"
    :add-tag="addTag"
    :delete-tag="deleteTag" 
    :tip-text="这里是自定义的提示文本" 
></tag>

<tag
    :tags="sizeForm.tags"
    :add-tag="addTag"
    :delete-tag="deleteTag" 
    :tip-text="customTipText"
></tag>

<script>
export default {,
  data() {
    return {
 	// ... 省略上面写过的JS代码	
    };
  },
  methods: {
	 // ... 省略上面写过的JS代码
     customTipText(maxTagNumber){
        return "这是自定义的内容，最多可以添加" + maxTagNumber + "个标签"
     } 
  },
};
</script>

<tag
    :tags="sizeForm.tags"
    :add-tag="addTag"
    :delete-tag="deleteTag" 
    :tip-text="customTipText"
    :max-tag-number="5"
></tag>

<tag
    :tags="sizeForm.tags"
    :add-tag="addTag"
    :delete-tag="deleteTag" 
    :tip-text="customTipText"
    :max-tag-number="10"
    border-color="#ccc"
    border-radius="2"
></tag>

<tag
    :tags="sizeForm.tags"
    :add-tag="addTag"
    :delete-tag="deleteTag" 
    :tip-text="customTipText"
    :max-tag-number="10"
    border-color="red"
    border-radius="25"
    no-tag-rounded
></tag>

<tag
    :tags="sizeForm.tags"
    :add-tag="addTag"
    :delete-tag="deleteTag"
    :tip-text="customTipText"
    :max-tag-number="10"
    border-color="red"
    border-radius="25"
    no-tip-rounded
    tag-background-color="red"
    tag-text-color="black"
></tag>