Skip to content

Tag 标签

基础用法

标签支持 primarysuccessinfowarningdanger 五种类型,默认为 primary

html
<template>
  <ATag>默认标签</ATag>
  <ATag type="primary">主要标签</ATag>
  <ATag type="success">成功标签</ATag>
  <ATag type="info">信息标签</ATag>
  <ATag type="warning">警告标签</ATag>
  <ATag type="danger">危险标签</ATag>
</template>
<template>
  <ATag>默认标签</ATag>
  <ATag type="primary">主要标签</ATag>
  <ATag type="success">成功标签</ATag>
  <ATag type="info">信息标签</ATag>
  <ATag type="warning">警告标签</ATag>
  <ATag type="danger">危险标签</ATag>
</template>

标签大小

标签支持 minismallnormallarge 四种大小,默认为 normal

html
<template>
  <ATag size="mini">迷你标签</ATag>
  <ATag size="small">小型标签</ATag>
  <ATag size="normal">普通标签</ATag>
  <ATag size="large">大型标签</ATag>
</template>
<template>
  <ATag size="mini">迷你标签</ATag>
  <ATag size="small">小型标签</ATag>
  <ATag size="normal">普通标签</ATag>
  <ATag size="large">大型标签</ATag>
</template>

标签变体

标签支持 solidoutlineghostlighttext 五种变体,默认为 solid

html
<template>
  <ATag variant="solid">实心标签</ATag>
  <ATag variant="outline">空心标签</ATag>
  <ATag variant="ghost">虚线标签</ATag>
  <ATag variant="light">次要标签</ATag>
  <ATag variant="text">文字标签</ATag>
</template>
<template>
  <ATag variant="solid">实心标签</ATag>
  <ATag variant="outline">空心标签</ATag>
  <ATag variant="ghost">虚线标签</ATag>
  <ATag variant="light">次要标签</ATag>
  <ATag variant="text">文字标签</ATag>
</template>

API

Props

参数说明类型默认值
type类型,可选值为 primarysuccessinfowarningdangerstringprimary
size大小,可选值为 minismallnormallargestringnormal
variant变体,可选值为 solidoutlineghostlighttextstringsolid
closable是否可关闭booleanfalse

Events

事件名说明回调参数
click点击标签时触发-
close关闭时触发-

Slots

名称说明
default自定义内容
icon自定义图标类名

MIT Licensed