# Tag 标签

# Tag 概述

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

TIP

当前组件仅在1.0.23版本及其以上可用

# Tag 代码演示

# 基本用法

简单的展示，添加属性 closable 可以关闭标签。
点击关闭标签时，会触发 on-close 事件，需自己实现关闭逻辑。

<template>
  <div>
    <h-tag>标签一</h-tag>
    <h-tag>标签二</h-tag>
    <h-tag v-if="show" closable @on-close="handleClose">标签三</h-tag>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClose() {
      this.show = false;
    },
  },
};
</script>

复制代码

# 样式类型

通过设置 type 属性为 border 或 dot 来选择不同的样式类型。建议有关闭的某些场景下使用 border，图例的场景下使用 dot。

<template>
  <div>
    <h-tag type="border">标签三</h-tag>
    <h-tag type="border" closable>标签四</h-tag>
    <h-tag type="dot">标签一</h-tag>
    <h-tag type="dot" closable>标签二</h-tag>
  </div>
</template>

复制代码

# 各种颜色

四种不同的颜色。

<template>
  <div>
    <div class="tag-group">
      <h-tag closable color="blue">标签一</h-tag>
      <h-tag closable color="green">标签二</h-tag>
      <h-tag closable color="red">标签三</h-tag>
      <h-tag closable color="yellow">标签四</h-tag>
    </div>
    <div class="tag-group">
      <h-tag type="border" closable color="blue">标签一</h-tag>
      <h-tag type="border" closable color="green">标签二</h-tag>
      <h-tag type="border" closable color="red">标签三</h-tag>
      <h-tag type="border" closable color="yellow">标签四</h-tag>
    </div>
    <div class="tag-group">
      <h-tag type="dot" closable color="blue">标签一</h-tag>
      <h-tag type="dot" closable color="green">标签二</h-tag>
      <h-tag type="dot" closable color="red">标签三</h-tag>
      <h-tag type="dot" closable color="yellow">标签四</h-tag>
    </div>
  </div>
</template>
<style>
.tag-group{
  margin-top: 10px;
}
</style>

复制代码

# 动态添加和删除

用数组生成一组标签，可以动态添加和删除。

<template>
  <div>
    <h-tag
      v-for="item in count"
      :key="item"
      :name="item"
      closable
      @on-close="handleClose">
      标签{{ item + 1 }}
    </h-tag>
    <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd" style="margin-top: 6px;">添加标签</Button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: [0, 1, 2],
    };
  },
  methods: {
    handleAdd() {
      if (this.count.length) {
        this.count.push(this.count[this.count.length - 1] + 1);
      } else {
        this.count.push(0);
      }
    },
    handleClose(event, name) {
      const index = this.count.indexOf(name);
      this.count.splice(index, 1);
    },
  },
};
</script>

复制代码

# Tag API

# Tag props

属性	说明	类型	默认值
closable	标签是否可以关闭	Boolean	false
checkable	标签是否可以选择	Boolean	false
checked	标签的选中状态	Boolean	true
type	标签的样式类型，可选值为 `border`、`dot` 或不填	String	-
color	标签颜色，可选值为 `blue`、`green`、`red`、`yellow`	String	-
name	当前标签的名称，使用 v-for，并支持关闭时，会比较有用	String \| Number	-
width(v1.0.25)	tag中文字长度	String \| Number	null
placement(v1.0.25)	提示框方向,可选 `bottom` `top`	String	bottom
showTitle(v1.0.25)	是否显示弹出框	Boolean	false
title(v1.0.25)	弹出框显示内容	String	不设置显示标签

# Tag events

事件名	说明	返回值
on-close	关闭时触发	event, name