Tag 标签

手机扫码预览

01:50



---

组件名：rice-tag

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

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

标签类型

支持 primary success warning error default 五种类型，默认为 default。通过 type 属性进行定义。

<rice-tag type="primary" text="主要" />
<rice-tag type="success" text="成功" />
<rice-tag type="warning" text="警告" />
<rice-tag type="error" text="错误" />
<rice-tag text="标签" />

朴素带浅色背景标签

通过 plain-fill 属性可以将标签设置为朴素标签

<rice-tag plain-fill type="primary" text="主要" />
<rice-tag plain-fill type="success" text="成功" />
<rice-tag plain-fill type="warning" text="警告" />
<rice-tag plain-fill type="error" text="错误" />

朴素标签

通过 plain 属性可以设置为朴素标签，此时文字的颜色为标签的颜色，标签的背景色为透明。

<rice-tag plain type="primary" text="主要" />
<rice-tag plain type="success" text="警告" />
<rice-tag plain type="warning" text="成功" />
<rice-tag plain type="error" text="错误" />

自定义颜色

通过 color 属性可以自定义标签的颜色，支持渐变色

<rice-tag color="#8b60ef" text="紫色" />
<rice-tag color="#8b60ef" plain-fill text="紫色" />
<rice-tag color="#8b60ef" plain text="紫色" />
<rice-tag color="linear-gradient(to right, rgb(255, 140, 8), rgb(238, 10, 36))" text="渐变" text-color="#fff" />

带图标

通过 icon 属性可以设置标签的图标。

<rice-tag icon="plus" type="primary" text="标签" />
<rice-tag icon="share" type="primary" text="标签" plain-fill />

可关闭标签

通过 closeable 属性可以设置标签为可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<rice-tag closeable type="primary" :show="show1" text="标签" @click="onClick" @close="show1=false" />
<rice-tag closeable type="success" :show="show2" text="标签" @click="onClick" @close="show2=false" />

<script setup>
  
const show1 = ref(true)
const show2 = ref(true)

const onClick = () => {
  uni.showToast({
    title: '点击了标签',
    icon: 'none'
  })
}
</script>

样式风格

<rice-tag :round="false" type="primary" text="标签" />
<rice-tag mark type="success" text="标签" />

标签尺寸

通过 size 属性可以设置标签的尺寸大小，可选large 和 small

<rice-tag size="small" type="primary" text="标签" />
<rice-tag type="primary" text="标签" />
<rice-tag size="large" type="primary" text="标签" />

API

Props

属性名	类型	说明	默认值
type	String	类型，可选值：primary、success、warning、error	-
size	String	尺寸 可选值：large、small	-
color	String	背景颜色	-
text	String	文字	-
icon	String	图标名称，等同于Icon的name值	-
text-color	String	文字颜色	-
text-size	String|Number	文字大小	-
show	Boolean	是否显示	-
plain	Boolean	是否为朴素按钮	-
plain-fill	Boolean	是否为带背景颜色的朴素按钮	-
round	Boolean	是否圆角	-
mark	Boolean	是否为标记样式（半圆角）	-
closeable	Boolean	是否可关闭	-
custom-style	Object	自定义样式	-

Event

事件名	说明	回调参数
click	点击事件	-
close	关闭标签时触发，在该事件中可以执行隐藏标签的逻辑。	-

类型定义

组件导出如下类型

//组件类型
const tagRef=ref<RiceTagComponentPublicInstance|null>(null)