Tag 标签

代码演示

基础用法

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

<script setup></script>

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

无边框

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

<script setup></script>

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

可关闭

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

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

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

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

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

形状

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

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

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

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

颜色

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

<script setup></script>

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

次要标签

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

<script setup></script>

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