Tag 标签

介绍

用于标记关键词和概括主要内容。

导入

import Tag from '@/components/display/Tag.vue'

用法

基础用法

标签支持 default、primary、success、warning、danger 五种类型，默认为 default。

vue

<template>
  <FlexRow :gap="20" wrap>
    <Tag text="primary" type="primary" />
    <Tag text="success" type="success" />
    <Tag text="default" type="default" />
    <Tag text="danger" type="danger" />
    <Tag text="warning" type="warning" />
  </FlexRow>
</template>

空心样式

通过 plain 属性将标签设置为空心样式，空心样式的文字为标签颜色，背景为白色。

vue

<template>
  <FlexRow :gap="20" wrap>
    <Tag plain text="primary" type="primary" />
    <Tag plain text="success" type="success" />
    <Tag plain text="default" type="default" />
    <Tag plain text="danger" type="danger" />
    <Tag plain text="warning" type="warning" />
  </FlexRow>
</template>

标签形状

通过 shape 属性设置标签的形状，支持 square（方形）、round（圆形）和 mark（标记形状）三种形状。

vue

<template>
  <FlexRow :gap="20" wrap>
    <Tag shape="square" text="方形" type="primary" />
    <Tag shape="round" text="园形" type="success" />
    <Tag shape="mark" text="标记形状" type="success" />
  </FlexRow>
</template>

标签尺寸

支持 larger、large、medium、small、mini 五种尺寸，默认为 medium。

vue

<template>
  <FlexRow :gap="20" wrap>
    <Tag text="超大号" type="primary" size="larger" />
    <Tag text="大号" type="primary" size="large" />
    <Tag text="普通" type="primary" size="medium" />
    <Tag text="小型" type="primary" size="small" />
    <Tag text="迷你" type="primary" size="mini" />
  </FlexRow>
</template>

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 onClose 事件，在 onClose 事件中可以执行隐藏标签的逻辑。

vue

<template>
  <Tag 
    v-if="showTag"
    text="可关闭的标签" 
    type="primary" 
    size="medium" 
    closeable
    @close="hideTag"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showTag = ref(true);

function hideTag() {
  showTag.value = false;
}
</script>

API 参考

Tag

标签组件。

Props

名称	说明	类型	必填	默认值
text	标签文字	`string`	-	-
type	标签类型，支持 default、primary、success、warning、danger 五种内置颜色类型	`TagTypes`	-	`'default'`
plain	通过 plain 属性设置为空心样式	`boolean`	-	`false`
shape	形状，支持 square、round、mark 三种形状	`'square' \| 'round' \| 'mark'`	-	`'round'`
closeable	是否可以被关闭	`boolean`	-	`false`
size	尺寸，支持 large、medium、small、larger、mini 五种尺寸	`TagSizes`	-	`'medium'`
textColor	自定义文字的颜色	`string`	-	-
borderRadius	圆角大小，仅在 shape=round 或者 shape=mark 时有效	`number \| string`	-	`20`
color	自定义颜色	`string`	-	-
innerStyle	自定义样式	`ViewStyle`	-	-
touchable	是否可点击	`boolean`	-	`true`

Slots

名称	说明
prefix	前缀插槽
suffix	后缀插槽

Events

名称	说明	参数
click	点击事件	`$event`
close	关闭事件	`$event`

主题变量

名称	类型	默认值	说明
TagBorderWidth	number	`2`	-
TagDangerBackgroundColor	string	`danger`	-
TagDangerColor	string	`white`	-
TagFontSize	number	`24`	-
TagLargeFonstSize	number	`36`	-
TagLargeFonstSize	number	`48`	-
TagMediumFonstSize	number	`30`	-
TagMiniFonstSize	number	`22`	-
TagPlainDangerBorderColor	string	`danger`	-
TagPlainDangerColor	string	`danger`	-
TagPlainDefaultBorderColor	string	`text.content`	-
TagPlainDefaultColor	string	`text.content`	-
TagPlainPrimaryBorderColor	string	`primary`	-
TagPlainPrimaryColor	string	`primary`	-
TagPlainSuccessBorderColor	string	`success`	-
TagPlainSuccessColor	string	`success`	-
TagPlainWarningBorderColor	string	`warning`	-
TagPlainWarningColor	string	`warning`	-
TagPrimaryBackgroundColor	string	`primary`	-
TagPrimaryColor	string	`white`	-
TagShape	string	`round`	-
TagSize	string	`medium`	-
TagSizeLargePaddingHorizontal	number	`20`	-
TagSizeLargePaddingVertical	number	`14`	-
TagSizeLargePaddingHorizontal	number	`25`	-
TagSizeLargePaddingVertical	number	`20`	-
TagSizeMediumPaddingHorizontal	number	`15`	-
TagSizeMediumPaddingVertical	number	`9`	-
TagSizeSmallFonstSize	number	`26`	-
TagSizeSmallPaddingHorizontal	number	`10`	-
TagSizeSmallPaddingVertical	number	`6`	-
TagSmallFonstSize	number	`26`	-
TagSizeSmallPaddingHorizontal	number	`5`	-
TagSizeSmallPaddingVertical	number	`3`	-
TagSuccessBackgroundColor	string	`success`	-
TagSuccessColor	string	`white`	-
TagType	string	`default`	-
TagWarningBackgroundColor	string	`warning`	-
TagWarningColor	string	`white`	-
TagCloseIconSize	number	`30`	-

Tag 标签 ​

介绍 ​

导入 ​

用法 ​

基础用法 ​

空心样式 ​

标签形状 ​

标签尺寸 ​

可关闭标签 ​

API 参考 ​

Tag ​

Props ​

Slots ​

Events ​

主题变量 ​