Tag 标签

代码演示

基础用法

<script setup></script>

<template>
  <a-space>
    <x-tag> 爱在西元前</x-tag>
    <x-tag type="success">
      不该
    </x-tag>
    <x-tag type="warning">
      超人不会飞
    </x-tag>
    <x-tag type="error">
      手写的从前
    </x-tag>
    <x-tag type="info">
      哪里都是你
    </x-tag>
  </a-space>
</template>

<style lang="less" scoped></style>

无边框

<script setup></script>

<template>
  <a-space>
    <x-tag :bordered="false">
      爱在西元前
    </x-tag>
    <x-tag
      :bordered="false"
      type="success"
    >
      不该
    </x-tag>
    <x-tag
      :bordered="false"
      type="warning"
    >
      超人不会飞
    </x-tag>
    <x-tag
      :bordered="false"
      type="error"
    >
      手写的从前
    </x-tag>
    <x-tag
      :bordered="false"
      type="info"
    >
      哪里都是你
    </x-tag>
  </a-space>
</template>

<style lang="less" scoped></style>

可关闭

<script setup>
import { message } from 'ant-design-vue'

function handleClick() {
  message.info('tag click')
}

function handleClose() {
  message.info('tag close')
}
</script>

<template>
  <a-space>
    <x-tag
      closable
      @close="handleClose"
    >
      爱在西元前
    </x-tag>
    <x-tag
      closable
      type="success"
      @close="handleClose"
    >
      不该
    </x-tag>
    <x-tag
      closable
      type="warning"
      @close="handleClose"
    >
      超人不会飞
    </x-tag>
    <x-tag
      closable
      type="error"
      @close="handleClose"
    >
      手写的从前
    </x-tag>
    <x-tag
      closable
      type="info"
      @click="handleClick"
      @close="handleClose"
    >
      哪里都是你
    </x-tag>
  </a-space>
</template>

<style lang="less" scoped></style>

形状

<script setup>
import { message } from 'ant-design-vue'

function handleClose() {
  message.info('tag close')
}
</script>

<template>
  <a-space>
    <x-tag
      closable
      round
      size="small"
      type="success"
      @close="handleClose"
    >
      不该
    </x-tag>
    <x-tag
      closable
      round
      type="error"
      @close="handleClose"
    >
      手写的从前
    </x-tag>
    <x-tag
      closable
      round
      size="large"
      type="error"
      @close="handleClose"
    >
      手写的从前
    </x-tag>
  </a-space>
</template>

<style lang="less" scoped></style>

颜色

<script setup></script>

<template>
  <x-tag
    border-color="#555"
    color="#BBB"
    text-color="#555"
  >
    告别夜晚 等待天亮
  </x-tag>
</template>

<style lang="less" scoped></style>

次要标签

<script setup></script>

<template>
  <a-space>
    <x-tag
      secondary
      type="success"
    >
      不该
    </x-tag>
    <x-tag
      secondary
      type="warning"
    >
      超人不会飞
    </x-tag>
    <x-tag
      secondary
      type="error"
    >
      手写的从前
    </x-tag>
    <x-tag
      secondary
      type="info"
    >
      哪里都是你
    </x-tag>
  </a-space>
</template>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
type	按钮类型，可选：default、primary、info、success、warning、error	string	default
color	颜色	string	-
text-color	文本颜色	string	-
border-color	边框颜色	string	-
icon	图标	VNode	-
secondary	次要标签	boolean	false
bordered	是否显示边框	boolean	true
round	是否圆形标签	boolean	false

Slots

名称	说明
icon	图标