Appearance

Tag 标签 ​

进行标记和分类的小标签。

代码演示 ​

基础用法 ​

基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 close 两个事件。

Tag 1LinkTag 2Prevent Default
vue
<template>
  <div>
    <a-tag>Tag 1</a-tag>
    <a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>
    <a-tag closable @close="log">Tag 2</a-tag>
    <a-tag closable @close.prevent>Prevent Default</a-tag>
  </div>
</template>
<script setup>
const log = e => {
  console.log(e);
};
</script>

可选择标签 ​

可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。

Categories:

Movies
Books
Music
Sports
vue
<template>
  <span style="margin-right: 8px">Categories:</span>
  <a-space :size="[0, 8]" wrap>
    <a-checkable-tag
      v-for="(tag, index) in tagsData"
      :key="tag"
      v-model:checked="selectTags[index]"
      @change="checked => handleChange(tag, checked)"
    >
      {{ tag }}
    </a-checkable-tag>
  </a-space>
</template>
<script setup>
import { reactive } from 'vue';
const tagsData = reactive(['Movies', 'Books', 'Music', 'Sports']);
const selectTags = reactive([false, true, false, false]);
const handleChange = (tag, checked) => {
  console.log(tag, checked);
};
</script>

多彩标签 ​

我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

Presets:

pinkredorangegreencyanbluepurple

Custom:

#f50#2db7f5#87d068#108ee9
vue
<template>
  <h4 style="margin-bottom: 16px">Presets:</h4>
  <div>
    <a-tag color="pink">pink</a-tag>
    <a-tag color="red">red</a-tag>
    <a-tag color="orange">orange</a-tag>
    <a-tag color="green">green</a-tag>
    <a-tag color="cyan">cyan</a-tag>
    <a-tag color="blue">blue</a-tag>
    <a-tag color="purple">purple</a-tag>
  </div>
  <h4 style="margin: 16px 0">Custom:</h4>
  <div>
    <a-tag color="#f50">#f50</a-tag>
    <a-tag color="#2db7f5">#2db7f5</a-tag>
    <a-tag color="#87d068">#87d068</a-tag>
    <a-tag color="#108ee9">#108ee9</a-tag>
  </div>
</template>

动态添加和删除 ​

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

UnremovableTag 2Tag 3Tag 3Tag 3Tag 3... New Tag
vue
<template>
  <template v-for="(tag, index) in state.tags" :key="tag">
    <a-tooltip v-if="tag.length > 20" :title="tag">
      <a-tag :closable="index !== 0" @close="handleClose(tag)">
        {{ `${tag.slice(0, 20)}...` }}
      </a-tag>
    </a-tooltip>
    <a-tag v-else :closable="index !== 0" @close="handleClose(tag)">
      {{ tag }}
    </a-tag>
  </template>
  <a-input
    v-if="state.inputVisible"
    ref="inputRef"
    v-model:value="state.inputValue"
    type="text"
    size="small"
    :style="{ width: '78px' }"
    @blur="handleInputConfirm"
    @keyup.enter="handleInputConfirm"
  />
  <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
    New Tag
  </a-tag>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue';
const inputRef = ref();
const state = reactive({
  tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
  inputVisible: false,
  inputValue: '',
});
const handleClose = removedTag => {
  const tags = state.tags.filter(tag => tag !== removedTag);
  console.log(tags);
  state.tags = tags;
};
const showInput = () => {
  state.inputVisible = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
const handleInputConfirm = () => {
  const inputValue = state.inputValue;
  let tags = state.tags;
  if (inputValue && tags.indexOf(inputValue) === -1) {
    tags = [...tags, inputValue];
  }
  console.log(tags);
  Object.assign(state, {
    tags,
    inputVisible: false,
    inputValue: '',
  });
};
</script>

预设状态的标签 ​

预设五种状态颜色，可以通过设置 color 为 success、 processing、error、default、warning 来代表不同的状态。

successprocessingerrorwarningdefault
success processing error warning waiting stop
vue
<template>
  <a-divider orientation="left">Without icon</a-divider>
  <div>
    <a-tag color="success">success</a-tag>
    <a-tag color="processing">processing</a-tag>
    <a-tag color="error">error</a-tag>
    <a-tag color="warning">warning</a-tag>
    <a-tag color="default">default</a-tag>
  </div>
  <a-divider orientation="left">With icon</a-divider>
  <div>
    <a-tag color="success">
      success
    </a-tag>
    <a-tag color="processing">
      processing
    </a-tag>
    <a-tag color="error">
      error
    </a-tag>
    <a-tag color="warning">
      warning
    </a-tag>
    <a-tag color="default">
      waiting
    </a-tag>
    <a-tag color="default">
      stop
    </a-tag>
  </div>
</template>
<script setup>
export {};
</script>

无边框 ​

无边框模式。

Tag 1
Tag 2
Tag 3
Tag 4
processing
success
error
warning
magenta
red
volcano
orange
gold
lime
green
cyan
blue
geekblue
purple
vue
<template>
  <a-space :size="[0, 'small']" wrap>
    <a-tag :bordered="false">Tag 1</a-tag>
    <a-tag :bordered="false">Tag 2</a-tag>
    <a-tag :bordered="false" closable>Tag 3</a-tag>
    <a-tag :bordered="false" closable>Tag 4</a-tag>
  </a-space>
  <a-divider />
  <a-space :size="[0, 'small']" wrap>
    <a-tag :bordered="false" color="processing">processing</a-tag>
    <a-tag :bordered="false" color="success">success</a-tag>
    <a-tag :bordered="false" color="error">error</a-tag>
    <a-tag :bordered="false" color="warning">warning</a-tag>
    <a-tag :bordered="false" color="magenta">magenta</a-tag>
    <a-tag :bordered="false" color="red">red</a-tag>
    <a-tag :bordered="false" color="volcano">volcano</a-tag>
    <a-tag :bordered="false" color="orange">orange</a-tag>
    <a-tag :bordered="false" color="gold">gold</a-tag>
    <a-tag :bordered="false" color="lime">lime</a-tag>
    <a-tag :bordered="false" color="green">green</a-tag>
    <a-tag :bordered="false" color="cyan">cyan</a-tag>
    <a-tag :bordered="false" color="blue">blue</a-tag>
    <a-tag :bordered="false" color="geekblue">geekblue</a-tag>
    <a-tag :bordered="false" color="purple">purple</a-tag>
  </a-space>
</template>

API ​

Tag ​

参数说明类型默认值
closable标签是否可以关闭booleanfalse
closeIcon自定义关闭按钮VNode | slot-
color标签色string-
icon设置图标VNode | slot-
bordered是否有边框booleantrue

事件 ​

事件名称说明回调参数
close关闭时的回调(e) => void

Tag.CheckableTag ​

参数说明类型默认值
checked(v-model)设置标签的选中状态booleanfalse

事件 ​

事件名称说明回调参数
change点击标签时触发的回调(checked) => void