Tag

Tag for categorizing or markup.

When To Use

• It can be used to tag by dimension or property.
• When categorizing.

Examples

Basic

<template>
  <div>
    <a-tag>Tag 1</a-tag>
    <a-tag>
      <a href="https://github.com/vueComponent/ant-design-vue">Link</a>
    </a-tag>
    <a-tag closable @close="log">
      Tag 2
    </a-tag>
    <a-tag closable @close="preventDefault">
      Prevent Default
    </a-tag>
  </div>
</template>

<script setup>
const log = (e) => {
  console.log(e)
}

const preventDefault = (e) => {
  e.preventDefault()
  console.log('Clicked! But prevent default.')
}
</script>

Colorful Tag

<template>
  <div>
    <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>
  </div>
</template>

Add and Remove Dynamically

<template>
  <div>
    <template v-for="(tag, index) in 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="inputVisible"
      ref="inputRef"
      v-model:value="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">
      <plus-outlined />
      New Tag
    </a-tag>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const tags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const inputValue = ref('')
const inputRef = ref()

const handleClose = (removedTag) => {
  const newTags = tags.value.filter(tag => tag !== removedTag)
  console.log(newTags)
  tags.value = newTags
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    inputRef.value.focus()
  })
}

const handleInputConfirm = () => {
  const newInputValue = inputValue.value
  let newTags = tags.value
  if (newInputValue && newTags.indexOf(newInputValue) === -1) {
    newTags = [...newTags, newInputValue]
  }
  console.log(newTags)
  Object.assign(tags, {
    value: newTags,
  })
  Object.assign(inputVisible, {
    value: false,
  })
  Object.assign(inputValue, {
    value: '',
  })
}
</script>

Checkable

<template>
  <div>
    <strong style="margin-right: 8px">Categories:</strong>
    <a-tag
      v-for="tag in ['Movies', 'Books', 'Music', 'Sports']"
      :key="tag"
      :checked="selectedTags.indexOf(tag) > -1"
      @change="(checked) => handleChange(tag, checked)"
    >
      {{ tag }}
    </a-tag>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedTags = ref(['Books'])

const handleChange = (tag, checked) => {
  const nextSelectedTags = checked
    ? [...selectedTags.value, tag]
    : selectedTags.value.filter(t => t !== tag)
  console.log('You are interested in: ', nextSelectedTags)
  selectedTags.value = nextSelectedTags
}
</script>

API

Tag

Property	Description	Type	Default	Version
closable	Whether the Tag can be closed	boolean	false
color	Color of the Tag	string	-
icon	Set the icon of tag	slot	-
visible	Whether the Tag is closed or not	boolean	true

Tag Events

Events Name	Description	Arguments	Version
close	Callback executed when tag is closed	(e) => void

Tag.CheckableTag

Property	Description	Type	Default	Version
checked	Checked status of Tag	boolean	false

Tag.CheckableTag Events

Events Name	Description	Arguments	Version
change	Callback executed when Tag is checked/unchecked	(checked) => void