# vue2-tag

**Repository Path**: lucson/vue2-tag

## Basic Information

- **Project Name**: vue2-tag
- **Description**: 一个可以动态增删的tag组件 支持丰富的自定义配置
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-04-10
- **Last Updated**: 2022-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

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

### 安装

`npm install vue2-tag`

### 引入

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

### 组件使用

#### 基础使用

##### template

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

##### script

```js
<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 ` 属性来修改

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

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

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

##### script

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

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

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

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

#### 修改边框颜色，边框圆角

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

```html
<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 ` 属性来去除

```html
<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` 修改

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