Tag 标签

短标签，用于标记与分类，支持可关闭。

基础用法

VueReactSvelte

<ATag>Vue</ATag>
<ATag>React</ATag>
<ATag>Svelte</ATag>

可关闭

VueReactSvelte

<script setup>
import { ref } from 'vue'
const tags = ref(['Vue', 'React', 'Svelte'])
</script>

<ATag
  v-for="tag in tags"
  :key="tag"
  closable
  @close="tags = tags.filter(t => t !== tag)"
>
  {{ tag }}
</ATag>

API

Props

名称	类型	默认值	说明
closable	boolean	false	是否显示关闭按钮
disabled	boolean	false	是否禁用

Emits

名称	参数	说明
close	—	关闭按钮点击且动画结束后触发

Slots

名称	说明
default	标签文本内容

交互特性

• 关闭时 scale(0.85) + opacity(0) 协同淡出
• 动画时长 220ms，匹配 --duration-base