> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/shi-tu/tag-biao-qian.md).

# Tag 标签

## 概述

对不同维度进行简单的标记和分类。

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iTag from 'iview-mpvue/dist/components/tag/tag'
    export default {
        components: {
            'i-tag': iTag
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/tag/style/css'
```

## 示例

```markup
<div class="one-tag">基本用法</div>
    <i-tag>标签一</i-tag>
<div class="one-tag">设置边框配置</div>
<i-tag 
    i-class="i-tags"
    name="标签一" 
    type="border" 
    color="red">
    标签一
</i-tag>
<i-tag 
    i-class="i-tags"
    name="标签一" 
    color="green"
    type="border">
    标签一
</i-tag>
<div class="one-tag">各种颜色配置</div>
<i-tag 
    i-class="i-tags"
    name="单个标签">
    标签一
</i-tag>
<i-tag 
    i-class="i-tags"
    name="单个标签" 
    color="red">
    标签一
</i-tag>
<i-tag 
    i-class="i-tags" 
    name="标签一" 
    color="green">
    标签一
</i-tag>
<i-tag 
    i-class="i-tags" 
    name="标签一" 
    color="blue">
    标签一
</i-tag>
<i-tag 
    i-class="i-tags" 
    name="标签一" 
    color="yellow">
    标签一
</i-tag>
<div class="one-tag">多个标签</div>
<i-tag 
    v-for="(item, index) in tags" 
    :key="index"
    @change="onChange" 
    :checkable="true" 
    :inner-text="item.name"
    :name="index" 
    :color="item.color" 
    :checked="item.checked" 
    type="border"
    i-class="i-tags-margin">
    {{item.name}}
</i-tag>
```

```javascript
<script>
export default {
    ...
    data() {
        return {
            oneChecked: false,
            tags: [
                {
                    name : '标签一',
                    checked : false,
                    color : 'default'
                },
                {
                    name : '标签二',
                    checked : false,
                    color : 'red'
                },
                {
                    name : '标签三',
                    checked : true,
                    color : 'blue'
                },
                {
                    name : '标签4️',
                    checked : true,
                    color : 'green'
                }
            ]
        }
    },
    methods: {
        oneChange(evt) {
            // todo
        },
        onChange(evt) {
            this.tags[evt.name].checked = evt.checked
        }
    }
}
</script>
```

## API

Tag properties

| 属性        | 说明                                                    | 类型      | 默认值     |
| --------- | ----------------------------------------------------- | ------- | ------- |
| i-class   | 自定义 class 类名                                          | String  | -       |
| checkable | 标签是否可以选择                                              | Boolean | false   |
| name      | 当前标签的名称                                               | String  | -       |
| checked   | 标签的选中状态                                               | Boolean | true    |
| type      | 标签的样式类型，可选值为 border、dot                               | String  | dot     |
| color     | 标签颜色，预设颜色值为 blue、green、red、yellow、default，你也可以自定义颜色值。 | String  | default |

Tag events

| 事件名         | 说明      | 返回值               |
| ----------- | ------- | ----------------- |
| v-on:change | 状态改变时触发 | { name, checked } |