代码演示

基本用法

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

<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 lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const log = (e: MouseEvent) => {
      console.log(e);
    };
    return {
      log,
    };
  },
});
</script>

Presets:

Custom:

多彩标签

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

<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>

Movies
Toggle

控制关闭状态

通过 visible 属性控制关闭状态。

<template>
  <a-tag v-model:visible="visible" closable>Movies</a-tag>
  <br />
  <a-button size="small" @click="visible = !visible">Toggle</a-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {
      visible: ref(false),
    };
  },
});
</script>

Twitter Youtube Facebook LinkedIn

图标按钮

当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。 如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

<template>
  <a-tag color="#55acee">
    <template #icon>
      <twitter-outlined />
    </template>
    Twitter
  </a-tag>
  <a-tag color="#cd201f">
    <template #icon>
      <youtube-outlined />
    </template>
    Youtube
  </a-tag>
  <a-tag color="#3b5999">
    <template #icon>
      <facebook-outlined />
    </template>
    Facebook
  </a-tag>
  <a-tag color="#55acee">
    <template #icon>
      <linkedin-outlined />
    </template>
    LinkedIn
  </a-tag>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
  TwitterOutlined,
  YoutubeOutlined,
  FacebookOutlined,
  LinkedinOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    TwitterOutlined,
    YoutubeOutlined,
    FacebookOutlined,
    LinkedinOutlined,
  },
});
</script>

可选择

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

该组件为完全受控组件，不支持非受控用法。

<template>
  <div>
    <a-checkable-tag v-model:checked="checked1" @change="handleChange">Tag1</a-checkable-tag>
    <a-checkable-tag v-model:checked="checked2" @change="handleChange">Tag2</a-checkable-tag>
    <a-checkable-tag v-model:checked="checked3" @change="handleChange">Tag3</a-checkable-tag>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    // or use watch
    const handleChange = (checked: boolean) => {
      console.log(checked);
    };
    return {
      handleChange,
      checked1: ref(false),
      checked2: ref(false),
      checked3: ref(false),
    };
  },
});
</script>

UnremovableTag 2Tag 3Tag 3Tag 3Tag 3… New Tag

动态添加和删除

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

<template>
  <template v-for="(tag, index) in tags" :key="index">
    <a-tooltip v-if="tag.length > 20" :title="tag">
      <a-tag :key="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="inputVisible"
    ref="inputRef"
    type="text"
    size="small"
    :style="{ width: '78px' }"
    v-model:value="inputValue"
    @blur="handleInputConfirm"
    @keyup.enter="handleInputConfirm"
  />
  <a-tag v-else @click="showInput" style="background: #fff; border-style: dashed">
    <plus-outlined />
    New Tag
  </a-tag>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, nextTick } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    PlusOutlined,
  },
  setup() {
    const inputRef = ref();
    const state = reactive({
      tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
      inputVisible: false,
      inputValue: '',
    });
    const handleClose = (removedTag: string) => {
      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: '',
      });
    };
    return {
      ...toRefs(state),
      handleClose,
      showInput,
      handleInputConfirm,
      inputRef,
    };
  },
});
</script>

Categories:MoviesBooksMusicSports

热门标签

选择你感兴趣的话题。

<template>
  <span :style="{ marginRight: '8px' }">Categories:</span>
  <template v-for="tag in tags" :key="tag">
    <a-checkable-tag
      :checked="selectedTags.indexOf(tag) > -1"
      @change="checked => handleChange(tag, checked)"
    >
      {{ tag }}
    </a-checkable-tag>
  </template>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive({
      tags: ['Movies', 'Books', 'Music', 'Sports'],
      selectedTags: [] as string[],
    });
    const handleChange = (tag: string, checked: boolean) => {
      const { selectedTags } = state;
      const nextSelectedTags = checked
        ? [...selectedTags, tag]
        : selectedTags.filter(t => t !== tag);
      console.log('You are interested in: ', nextSelectedTags);
      state.selectedTags = nextSelectedTags;
    };
    return {
      ...toRefs(state),
      handleChange,
    };
  },
});
</script>

预设状态的标签

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

<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">
      <template #icon>
        <check-circle-outlined />
      </template>
      success
    </a-tag>
    <a-tag color="processing">
      <template #icon>
        <sync-outlined :spin="true" />
      </template>
      processing
    </a-tag>
    <a-tag color="error">
      <template #icon>
        <close-circle-outlined />
      </template>
      error
    </a-tag>
    <a-tag color="warning">
      <template #icon>
        <exclamation-circle-outlined />
      </template>
      warning
    </a-tag>
    <a-tag color="default">
      <template #icon>
        <clock-circle-outlined />
      </template>
      waiting
    </a-tag>
    <a-tag color="default">
      <template #icon>
        <minus-circle-outlined />
      </template>
      stop
    </a-tag>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
  CheckCircleOutlined,
  SyncOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  ClockCircleOutlined,
  MinusCircleOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    CheckCircleOutlined,
    SyncOutlined,
    CloseCircleOutlined,
    ExclamationCircleOutlined,
    ClockCircleOutlined,
    MinusCircleOutlined,
  },
});
</script>

API

Tag

事件

Tag.CheckableTag

事件