Tag 标签

概述

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

代码示例

Tag 标签 - 图1

基本用法

简单的展示,添加属性closable可以关闭标签。

点击关闭标签时,会触发 on-close 事件,需自己实现关闭逻辑。

  1. <template>
  2. <Tag>标签一</Tag>
  3. <Tag>标签二</Tag>
  4. <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
  5. </template>
  6. <script>
  7. export default {
  8. data () {
  9. return {
  10. show: true
  11. }
  12. },
  13. methods: {
  14. handleClose () {
  15. this.show = false;
  16. }
  17. }
  18. }
  19. </script>

Tag 标签 - 图2

样式类型

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

  1. <template>
  2. <Tag type="border">标签三</Tag>
  3. <Tag type="border" closable>标签四</Tag>
  4. <Tag type="dot">标签一</Tag>
  5. <Tag type="dot" closable>标签二</Tag>
  6. </template>
  7. <script>
  8. export default {
  9. }
  10. </script>

Tag 标签 - 图3

各种颜色

多种预设颜色,可自定义颜色。

  1. <template>
  2. <Tag color="default">default</Tag>
  3. <Tag color="primary">primary</Tag>
  4. <Tag color="success">success</Tag>
  5. <Tag color="error">error</Tag>
  6. <Tag color="warning">warning</Tag>
  7. <Tag color="magenta">magenta</Tag>
  8. <Tag color="red">red</Tag>
  9. <Tag color="volcano">volcano</Tag>
  10. <Tag color="orange">orange</Tag>
  11. <Tag color="gold">gold</Tag>
  12. <Tag color="yellow">yellow</Tag>
  13. <Tag color="lime">lime</Tag>
  14. <Tag color="green">green</Tag>
  15. <Tag color="cyan">cyan</Tag>
  16. <Tag color="blue">blue</Tag>
  17. <Tag color="geekblue">geekblue</Tag>
  18. <Tag color="purple">purple</Tag>
  19. <Tag color="#FFA2D3">Custom Color</Tag>
  20. <br><br>
  21. <Tag type="border" closable color="primary">标签一</Tag>
  22. <Tag type="border" closable color="success">标签二</Tag>
  23. <Tag type="border" closable color="error">标签三</Tag>
  24. <Tag type="border" closable color="warning">标签四</Tag>
  25. <br><br>
  26. <Tag type="dot" closable color="primary">标签一</Tag>
  27. <Tag type="dot" closable color="success">标签二</Tag>
  28. <Tag type="dot" closable color="error">标签三</Tag>
  29. <Tag type="dot" closable color="warning">标签四</Tag>
  30. </template>
  31. <script>
  32. export default {
  33. }
  34. </script>

Tag 标签 - 图4

可选择

设置属性 checkable,可以对标签进行选择,属性 checked 控制当前选择状态。

  1. <template>
  2. <Tag checkable color="primary">标签一</Tag>
  3. <Tag checkable color="success">标签二</Tag>
  4. <Tag checkable color="error">标签三</Tag>
  5. <Tag checkable color="warning">标签四</Tag>
  6. </template>
  7. <script>
  8. export default {
  9. }
  10. </script>

Tag 标签 - 图5

动态添加和删除

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

  1. <template>
  2. <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
  3. <Button icon="ios-add" type="dashed" size="small" @click="handleAdd">添加标签</Button>
  4. </template>
  5. <script>
  6. export default {
  7. data () {
  8. return {
  9. count: [0, 1, 2]
  10. }
  11. },
  12. methods: {
  13. handleAdd () {
  14. if (this.count.length) {
  15. this.count.push(this.count[this.count.length - 1] + 1);
  16. } else {
  17. this.count.push(0);
  18. }
  19. },
  20. handleClose2 (event, name) {
  21. const index = this.count.indexOf(name);
  22. this.count.splice(index, 1);
  23. }
  24. }
  25. }
  26. </script>

API

Tag props

属性说明类型默认值
closable标签是否可以关闭Booleanfalse
checkable标签是否可以选择Booleanfalse
checked标签的选中状态Booleantrue
type标签的样式类型,可选值为 borderdot或不填String-
color标签颜色,预设颜色值为defaultprimarysuccesswarningerrorbluegreenredyellowpinkmagentavolcanoorangegoldlimecyangeekbluepurple,你也可以自定义颜色值。Stringdefault
name当前标签的名称,使用 v-for,并支持关闭时,会比较有用String | Number-
fade是否在出现和消失时使用渐变的动画,动画时长可能会引起占位的闪烁Booleantrue

Tag events

事件名说明返回值
on-close关闭时触发event, name
on-change切换选中状态时触发checked, name