一个基于Vue2的动态添加删除Tag标签的组件

安装

npm install vue2-tag

引入

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

组件使用

基础使用

template

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

script

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

上面所演示的是必选项 如果不传递会报错提示相关信息

自定义提示文本

如果需要修改默认的提示文本可以通过 tip-text 属性来修改

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

同时也可以接受一个函数 函数的形参为可以输入的最大的标签数量 默认是 7

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

script

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

修改可以添加的最大标签数量

通过 max-tag-number 属性就可以修改 , 超过 最大数量就添加不进去了

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

修改边框颜色，边框圆角

可以通过 border-color 和 border-radius 两个属性来修改

<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 标签的圆角效果

可以通过 no-tag-rounded 属性来去除

<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 标签的背景,字体颜色

通过 tag-background-color 和 tag-text-color 修改

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

属性

| 属性 | 解释 | 类型 | | -------------------- | ---------------------- | -------------- | | max-tag-number | 允许最大的标签添加数量 | Number|String | | no-tag-rounded | 去除标签的圆角效果 | Boolean | | tag-background-color | 标签的背景颜色 | String | | tag-text-color | 标签的文本颜色 | String | | border-color | 边框颜色 | String | | border-radius | 边框圆角 | Number|String | | tags | 存储标签的数组，必须 | Array |

方法

| 方法 | 解释 | 类型 | | ---------- | ------------------------------------------------ | ---------------- | | add-tag | 添加tag的方法，参数为当前添加的tag | Function | | delete-tag | 删除tag的方法，参数为当前tag所在数组的下标 | Function | | tip-text | 自定义提示文本，若为函数，参数为允许的最大标签数 | String|Fucntion |