Vue DevUI
主题

Tag 标签

标签展示组件。

何时使用

用户需要展示多个标签时。

基本用法

标签一
标签二
标签三
标签四
标签五
blue-w98
aqua-w98
aqua-w98
olivine-w98
green-w98
yellow-w98
orange-w98
red-w98
pink-w98
purple-w98
#aa2116
#007d65
由type属性来选择 tag 的类型，也可以通过color属性来自定义主题色
<template>
  <div class="tag-demo-wrapper">
    <d-tag>标签一</d-tag>
    <d-tag type="primary">标签二</d-tag>
    <d-tag type="success">标签三</d-tag>
    <d-tag type="warning">标签四</d-tag>
    <d-tag type="danger">标签五</d-tag>
  </div>
  <div class="tag-demo-wrapper">
    <d-tag color="blue-w98">blue-w98</d-tag>
    <d-tag color="aqua-w98">aqua-w98</d-tag>
    <d-tag color="aqua-w98">aqua-w98</d-tag>
    <d-tag color="olivine-w98">olivine-w98</d-tag>
    <d-tag color="green-w98">green-w98</d-tag>
    <d-tag color="yellow-w98">yellow-w98</d-tag>
    <d-tag color="orange-w98">orange-w98</d-tag>
    <d-tag color="red-w98">red-w98</d-tag>
    <d-tag color="pink-w98">pink-w98</d-tag>
    <d-tag color="purple-w98">purple-w98</d-tag>
    <d-tag color="#aa2116">#aa2116</d-tag>
    <d-tag color="#007d65">#007d65</d-tag>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style>
.tag-demo-wrapper > * {
  margin: 4px;
}
</style>

自定义

bug
bug
bug
使用默认插槽可自由定制你的 tag
<template>
  <div class="tag-demo-wrapper">
    <d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
    <d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
    <d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </d-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isChecked = ref(true);
    const tagClick = () => {
      isChecked.value = !isChecked.value;
    };
    return { isChecked, tagClick };
  },
});
</script>

可被选中

不要点我呀
不要点我呀
由checked属性来设置 tag 选中的状态，可通过点击来改变checked的值
<template>
  <div class="tag-demo-wrapper">
    <d-tag type="primary" :checked="isChecked" @click="tagClick">不要点我呀</d-tag>
    <d-tag color="#39afcc" :checked="isChecked" @click="tagClick">不要点我呀</d-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isChecked = ref(true);
    const tagClick = () => {
      isChecked.value = !isChecked.value;
    };
    return { isChecked, tagClick };
  },
});
</script>

可移除的

tag1
tag2
tag3
由deletable属性来设置标签是否可删除
<template>
  <div class="tag-demo-wrapper">
    <d-tag v-for="item in tagList" deletable :key="item" @tag-delete="() => handleClose(item)">{{ item }}</d-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const tagList = ref(['tag1', 'tag2', 'tag3']);
    const handleClose = (item) => {
      tagList.value.splice(tagList.value.indexOf(item), 1);
    };
    return {
      tagList,
      handleClose,
    };
  },
});
</script>

不同尺寸

Large
Middle
Small
Large
Middle
Small
Tag 默认的是 md 尺寸，有 lg、md、sm 三种尺寸可选
<template>
  <div class="tag-demo-wrapper">
    <d-tag type="primary" size="lg">Large</d-tag>
    <d-tag type="success" size="md">Middle</d-tag>
    <d-tag type="warning" size="sm">Small</d-tag>
  </div>
  <div class="tag-demo-wrapper">
    <d-tag type="primary" deletable size="lg">Large</d-tag>
    <d-tag type="primary" deletable size="md">Middle</d-tag>
    <d-tag type="primary" deletable size="sm">Small</d-tag>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

Tag 参数

参数类型默认值说明跳转至 Demo
typeTagType''可选，标签的类型，指定类型后则 color 不生效基本用法
colorstring''可选，标签的主题色基本用法
title-contentstring''可选，设置鼠标悬浮时 title 的显示内容基本用法
checkedbooleanfalse可选，标签选中的初始状态可被选中
deletablebooleanfalse可选，设置标签是否可删除可移除的
sizeSizeType'md'可选，标签尺寸不同尺寸

Tag 事件

事件名说明
click点击 tag 的时候触发的事件
tag-delete删除 tag 的时候触发的事件
checked-changetag 的 check 状态改变时触发的事件，通过参数获取标签最新状态

Tag 类型

TagType 

type TagType = 'primary' | 'success' | 'warning' | 'danger';

SizeType 

type SizeType = 'lg' | 'md' | 'sm';
Contributors
粤A2-20044005号