Tag 标签

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

何时使用

• 用于标记事物的属性和维度。
• 进行分类。

基本用法

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

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

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

多彩标签

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

<template>
  <div>
    <h4 style="margin-bottom: 16px;">Presets:</h4>
    <div>
      <g-tag color="magenta">magenta</g-tag>
      <g-tag color="red">red</g-tag>
      <g-tag color="volcano">volcano</g-tag>
      <g-tag color="orange">orange</g-tag>
      <g-tag color="gold">gold</g-tag>
      <g-tag color="lime">lime</g-tag>
      <g-tag color="green">green</g-tag>
      <g-tag color="cyan">cyan</g-tag>
      <g-tag color="blue">blue</g-tag>
      <g-tag color="geekblue">geekblue</g-tag>
      <g-tag color="purple">purple</g-tag>
    </div>
    <h4 style="margin: 16px 0;">Custom:</h4>
    <div>
      <g-tag color="#f50">#f50</g-tag>
      <g-tag color="#2db7f5">#2db7f5</g-tag>
      <g-tag color="#87d068">#87d068</g-tag>
      <g-tag color="#108ee9">#108ee9</g-tag>
    </div>
  </div>
</template>

动态添加和删除

用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 afterClose 实现。

<template>
  <div>
    <template v-for="(tag, index) in tags" :key="tag">
      <g-tooltip v-if="tag.length > 20" :title="tag">
        <g-tag :closable="index !== 0" @close="handleClose(tag)">
          {{ `${tag.slice(0, 20)}...` }}
        </g-tag>
      </g-tooltip>
      <g-tag v-else :closable="index !== 0" @close="handleClose(tag)">
        {{ tag }}
      </g-tag>
    </template>
    <g-input
      v-if="inputVisible"
      ref="inputRef"
      v-model:value="inputValue"
      type="text"
      size="small"
      style="width: 78px"
      @blur="handleInputConfirm"
      @keyup.enter="handleInputConfirm"
    />
    <g-tag v-else style="background: #fff; border-style: dashed;" @click="showInput">
      <g-icon type="plus" /> New Tag
    </g-tag>
  </div>
</template>

<script>
import { nextTick, ref } from 'vue'

export default {
  setup() {
    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: ''
      })
    }
    
    return {
      tags,
      inputVisible,
      inputValue,
      inputRef,
      handleClose,
      showInput,
      handleInputConfirm
    }
  }
}
</script>

可选择标签

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

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

<template>
  <div>
    <strong style="margin-right: 8px;">Categories:</strong>
    <g-checkable-tag
      v-for="tag in tagsData"
      :key="tag"
      :checked="selectedTags.indexOf(tag) > -1"
      @change="(checked) => handleChange(tag, checked)"
    >
      {{ tag }}
    </g-checkable-tag>
  </div>
</template>

<script>
import { ref } from 'vue'

const tagsData = ['Movies', 'Books', 'Music', 'Sports']

export default {
  setup() {
    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
    }
    
    return {
      tagsData,
      selectedTags,
      handleChange
    }
  }
}
</script>

图标按钮

当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

<template>
  <div>
    <g-tag icon="twitter">Twitter</g-tag>
    <g-tag icon="youtube">Youtube</g-tag>
    <g-tag icon="facebook">Facebook</g-tag>
    <g-tag icon="linkedin">LinkedIn</g-tag>
    <g-tag icon="github">Github</g-tag>
  </div>
</template>

状态标签

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

<template>
  <div>
    <g-tag color="success">success</g-tag>
    <g-tag color="processing">processing</g-tag>
    <g-tag color="error">error</g-tag>
    <g-tag color="warning">warning</g-tag>
    <g-tag color="default">default</g-tag>
  </div>
</template>

无边框

<template>
  <div>
    <g-tag :bordered="false">Tag 1</g-tag>
    <g-tag :bordered="false" closable>Tag 2</g-tag>
    <g-tag :bordered="false" closable>Prevent Default</g-tag>
  </div>
</template>

API

Tag

参数	说明	类型	默认值	版本
bordered	是否有边框	boolean	true	4.0.0
closable	标签是否可以关闭（点击默认关闭）	boolean	false
color	标签色	string	-
icon	设置图标	string | VNode | #icon	-	4.0.0
visible	是否显示标签	boolean	true

Tag 事件

事件名称	说明	回调参数
close	关闭时的回调（可通过 e.preventDefault() 来阻止默认行为）	(e) => void

Tag.CheckableTag

参数	说明	类型	默认值
checked	设置标签的选中状态	boolean	false

Tag.CheckableTag 事件

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