tui-tag 标签 开源组件

介绍

可自定义大小，设置字体大小，圆角，镂空等。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiTag from "@/components/thorui/tui-tag/tui-tag.vue"
export default {
	components:{
		tuiTag
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-tag": "/components/thorui/tui-tag/tui-tag"
  }
}

代码演示

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

基础用法

通过 type 属性控制标签颜色。

<tui-tag type="black">实心标签</tui-tag>
<tui-tag type="white">实心标签</tui-tag>
<tui-tag type="danger">实心标签</tui-tag>
<tui-tag type="warning">实心标签</tui-tag>

设置大小

通过 padding 属性控制标签大小。

<tui-tag type="black" padding="12rpx">实心标签</tui-tag>
<tui-tag type="white" padding="20rpx 30rpx">实心标签</tui-tag>
<tui-tag type="danger" padding="20rpx 30rpx">实心标签</tui-tag>
<tui-tag type="warning" padding="8rpx" size="24rpx">实心标签</tui-tag>

空心样式

通过 plain 属性设置为空心样式。

<tui-tag type="black" plain>实心标签</tui-tag>
<tui-tag type="white" plain>实心标签</tui-tag>
<tui-tag type="danger" plain>实心标签</tui-tag>
<tui-tag type="warning" plain>实心标签</tui-tag>

标签形状

通过 shape 属性设置标签形状，支持 circle(圆角)， square(默认方形)，circleLeft(左圆角)，circleRight(右圆角)。

<tui-tag type="black">实心标签</tui-tag>
<tui-tag type="white" shape="circle">实心标签</tui-tag>
<tui-tag type="danger" shape="circleLeft">实心标签</tui-tag>
<tui-tag type="warning" shape="circleRight">实心标签</tui-tag>

Slots

插槽名称	说明
default	标签内显示内容，可插入图片

Props

属性名	类型	说明	默认值
type	String	样式类型，可传入[primary， white， danger，pink，warning， green， gray，black，light-danger，light-blue，light-brownish，light-orange，light-green]等	primary
padding	String	内边距值	16rpx 26rpx
margin	String	外边距值	0
size	String	文字大小 单位rpx	28rpx
shape	String	形状：circle， square，circleLeft，circleRight	square
plain	Boolean	是否空心	false
hover	Boolean	点击效果	false
scaleMultiple	Number	缩放倍数	1
originLeft	Boolean	元素的基点位置0 center	false
originRight	Boolean	元素的基点位置100% center	false
index	Number	索引	0

TIP

注：自v2.8.0起，主色支持全局配置。 详见全局配置文档

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击事件，点击标签时触发	{index: Number}

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码