Tag 标签

AuTag 用于状态、分类和可移除条目的紧凑文字标签。

基础用法

默认进行中已完成待确认失败小标签可移除

<script setup>
import { ref } from 'vue';
import { AuButton, AuTag, AuTransition } from 'aurora-plus';
const visible = ref(true);
</script>
<template>
  <div class="tag-example">
    <AuTag dot>默认</AuTag>
    <AuTag type="primary" dot>进行中</AuTag>
    <AuTag type="success" dot>已完成</AuTag>
    <AuTag type="warning">待确认</AuTag>
    <AuTag type="danger">失败</AuTag>
    <AuTag type="info" size="small">小标签</AuTag>
    <AuTransition preset="scale">
      <AuTag v-if="visible" closable @close="visible = false">可移除</AuTag>
    </AuTransition>
    <AuButton v-if="!visible" size="small" @click="visible = true">恢复标签</AuButton>
  </div>
</template>
<style scoped>
.tag-example { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
</style>

close 只通知调用方，由调用方控制标签是否移除。

Tag API

Attributes

属性	说明	类型	默认值
type	语义类型：default / primary / success / warning / danger / info	string	default
size	尺寸：small / default / large	string	default
dot	显示语义色状态点	boolean	false
closable	显示关闭按钮	boolean	false

Events

事件名	说明	参数
close	点击关闭按钮	(event)

Slots

插槽名	说明
default	标签文字