Tag 标签

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

• 通过 shape 属性设置多种形状，circle 两边半圆形, square 方形，带圆角
• 通过 type 属性设置5种主题，primary、success 、warning 、error 、info
• 通过 plain 属性设置是否镂空
• 通过 plainFill 属性设置镂空时，是否填充背景色（默认 false）

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 type 属性设置主题类型，默认为 primary
• 通过 text 属性设置标签内容

<fu-tag text="扶摇直上" type="success"></fu-tag>

设置标签形状

• 通过 shape 属性设置标签的形状，默认为 square（方形，带圆角），可选：circle（两边半圆形）

<fu-tag text="秋水入海" shape="circle"></fu-tag>

设置标签是否可以关闭

• 通过 closable 属性设置为 true，会在标签上自动添加一个关闭图标，默认为 false
• 设置可关闭后，点击关闭按钮，会触发 close 事件，回调中手动设置 show 属性为 false 即可隐藏标签

<template>
    <fu-tag text="秋水共长天一色" :show="show" closable @close="handleClose"></fu-tag>
</template>

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

    // data数据
    let show = ref(true);

    // methods方法
    const handleClose = () => {
        show.value = false;
    };
</script>

API

Tag Props

属性名	说明	类型	默认值	可选值
index	用于标识标签，点击标签时，会通过 click 事件返回此值	String｜Number	-	-
show	标签是否显示	Boolean	true	false
type	标签的主题类型	String	primary	success/warning/error/info
disabled	标签是否禁用	Boolean	false	true
shape	标签的形状	String	square	circle
size	标签的大小	String	medium	large/mini
text	标签的文本内容	String	-	-
bgColor	标签的背景色	String	-	-
color	标签的字体颜色	String	-	-
borderColor	标签的边框颜色	String	-	-
closeColor	标签的关闭图标颜色	String	-	-
plainFill	镂空标签是否填充背景色	Boolean	false	true
plain	是否镂空	Boolean	false	true
closable	是否可关闭，设置为 true 文字右边会出现一个关闭图标	Boolean	false	true
icon	内置图标	String	-	-
iconColor	内置图标颜色	String	-	-

Tag Events

事件名	说明	回调参数
click	点击标签时触发	() => void
close	closeable 为 true 时，点击关闭图标时触发	() => void

Tag Slot

名称	说明
icon	自定义左侧标签的图标/图片