Tag 标签组件

tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

🏯基本使用示例

<!-- 全局使用 -->
<hy-tag label="标签"></hy-tag>

主题色

• 通过设置type配置主题色
  • primary：信息标签（默认）
  • success：主要标签
  • info：默认标签
  • warning：警告标签
  • error：危险标签
• color值设置自定义颜色，渐变色;

<template>
    <hy-tag label="标签" type="primary"></hy-tag>
    <hy-tag label="标签" type="success"></hy-tag>
    <hy-tag label="标签" type="error"></hy-tag>
    <hy-tag label="标签" type="warning"></hy-tag>
    <hy-tag label="标签" type="info"></hy-tag>
    <hy-tag label="标签" color="#800080"></hy-tag>
    <hy-tag label="标签" color="#FFF420"></hy-tag>
    <hy-tag label="标签" color="#A4E82F"></hy-tag>
    <hy-tag label="标签" color="#E72F8C"></hy-tag>
</template>

镂空标签

• 通过设置plain设置镂空背景色

<template>
    <hy-tag label="标签" type="primary" plain></hy-tag>
    <hy-tag label="标签" type="success" plain></hy-tag>
    <hy-tag label="标签" type="error" plain></hy-tag>
    <hy-tag label="标签" type="warning" plain></hy-tag>
    <hy-tag label="标签" type="info" plain></hy-tag>
    <hy-tag label="标签" color="#800080" plain></hy-tag>
    <hy-tag label="标签" color="#FFF420" plain></hy-tag>
    <hy-tag label="标签" color="#A4E82F" plain></hy-tag>
    <hy-tag label="标签" color="#E72F8C" plain></hy-tag>
</template>

镂空带背景色

• 通过设置plainFill给背景色半透明

<template>
    <hy-tag label="标签" type="primary" plain plainFill></hy-tag>
    <hy-tag label="标签" type="success" plain plainFill></hy-tag>
    <hy-tag label="标签" type="error" plain plainFill></hy-tag>
    <hy-tag label="标签" type="warning" plain plainFill></hy-tag>
    <hy-tag label="标签" type="info" plain plainFill></hy-tag>
    <hy-tag label="标签" color="#800080" plain plainFill></hy-tag>
    <hy-tag label="标签" color="#FFF420" plain plainFill></hy-tag>
    <hy-tag label="标签" color="#A4E82F" plain plainFill></hy-tag>
    <hy-tag label="标签" color="#E72F8C" plain plainFill></hy-tag>
</template>

镂空带背景色不带边框

<template>
  <hy-tag :label="t('label')" type="primary" :border="false" shape="circle"></hy-tag>
  <hy-tag :label="t('label')" type="success" :border="false"></hy-tag>
  <hy-tag
          :label="t('label')"
          type="primary"
          plain
          plain-fill
          :border="false"
          shape="circle"
  ></hy-tag>
  <hy-tag :label="t('label')" type="error" plain plain-fill :border="false"></hy-tag>
</template>

标签形状

• 通过设置shape设置标签形状
  • circle: 半圆形
  • square: 方形
  • opposite: 对角圆角

<template>
    <hy-tag label="圆形" shape="circle"></hy-tag>
    <hy-tag label="方形" shape="square"></hy-tag>
    <hy-tag label="对角圆角" shape="opposite"></hy-tag>
</template>

可关闭标签

• 通过配置closable在右上角提供了删除标签的图标

<template>
    <up-tag label="标签" closable :show="show" @close="show = false"></up-tag>
</template>

<script setup>
    import { ref } from 'vue';

    const show = ref(true);
</script>

标签大小设置

• size属性为您提供了三种规格的标签大小，默认中等。
  • large: 大标签
  • medium: 中标签
  • small: 小标签
  • mini: 迷你版

<template>
    <hy-tag label="标签" size="large"></hy-tag>
    <hy-tag label="标签" size="medium"></hy-tag>
    <hy-tag label="标签" size="small"></hy-tag>
    <hy-tag label="标签" size="mini"></hy-tag>
</template>

标签前缀图标

<template>
    <hy-tag label="地址" :icon="IconConfig.MAP"></hy-tag>
    <hy-tag label="帮助" :icon="IconConfig.HELP"></hy-tag>
</template>

<script setup>
    import { IconConfig } from '@/hy-app/ui';
</script>

API

Tag Props

参数	说明	类型	默认值
label	标签的文字内容	string	-
type	主题类型	error|warning|success|primary|info	primary
disabled	禁用	boolean	false
size	标签大小	mini|small|medium|large	medium
shape	标签形状	circle|square|opposite	square
bgColor	背景颜色，默认为空字符串，即不处理	string	-
color	标签字体颜色，默认为空字符串，即不处理	string	-
border	是否显示边框	boolean	true
borderColor	标签的边框颜色	string	-
closeColor	关闭按钮图标的颜色	string	-
value	点击时返回的索引值，用于区分例遍的数组哪个元素被点击了	string|number	-
plainFill	镂空时是否填充背景色	boolean	false
plain	是否镂空	boolean	false
closable	是否可关闭，设置为true，文字右边会出现一个关闭图标	boolean	false
show	标签显示	boolean	true
icon	图标，详见图标Api	HyIconProps	-
customStyle	定义需要用到的外部样式	CSSProperties	-
customClass	自定义外部类名	CSSProperties	-

Events

事件名	说明	回调参数
click	点击标签触发	{label:显示文本内容, value:文本值}
close	closable为true时，点击标签关闭按钮触发	value：文本内容

CSS 变量

变量名	说明	默认值
--hy-tag-border-width	边框宽度	2rpx
--hy-tag-padding-mini	mini 内边距	4rpx 12rpx
--hy-tag-padding-small	small 内边距	6rpx 16rpx
--hy-tag-padding-medium	medium 内边距	8rpx 20rpx
--hy-tag-padding-large	large 内边距	10rpx 24rpx
--hy-tag-close-size-mini	mini 关闭图标尺寸	14px
--hy-tag-close-size-small	small 关闭图标尺寸	16px
--hy-tag-close-size-medium	medium 关闭图标尺寸	20px
--hy-tag-close-size-large	large 关闭图标尺寸	22px
--hy-tag-font-size-mini	mini 字号（行高同步跟随）	跟随 --hy-font-size-xs（20rpx）
--hy-tag-font-size-small	small 字号（行高同步跟随）	跟随 --hy-font-size-sm（24rpx）
--hy-tag-font-size-medium	medium 字号（行高同步跟随）	跟随 --hy-font-size-base（28rpx）
--hy-tag-font-size-large	large 字号（行高同步跟随）	跟随 --hy-font-size-md（32rpx）
--hy-tag-close-radius	关闭按钮圆角	跟随 --hy-radius-semicircle（100px）

12:33