Skip to content
On this page

组件库文档 tmui.design

标签 Tag

标签


🌶️ 标签 Tag 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="30" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<tm-tag size="xs" label="标签"></tm-tag>
				<tm-tag color="green" size="s" label="标签"></tm-tag>
				<tm-tag color="orange" size="m" label="标签"></tm-tag>
				<tm-tag color="red" size="n" label="标签"></tm-tag>
				<tm-tag color="blue" size="g" label="标签"></tm-tag>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="30" _class="text-weight-b" label="允许关闭"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<tm-tag closable size="n" label="标签"></tm-tag>
				<tm-tag closable color="green" size="n" label="标签"></tm-tag>
				<tm-tag :before-close="testClose" closable color="red" size="n" label="异步关闭"></tm-tag>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="30" _class="text-weight-b" label="放置图标,一些其它属性"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<tm-tag text :shadow="0" icon="tmicon-weixinzhifu" color="orange" size="m" label="标签"></tm-tag>
				<tm-tag text :shadow="0" color="red" size="m" label="标签"></tm-tag>
				<tm-tag text outlined :shadow="0" color="red" size="m" label="浅边框"></tm-tag>
				<tm-tag outlined :shadow="0" color="red" size="m" label="深边框"></tm-tag>
				<tm-tag outlined :shadow="0" color="grey" font-color="black" border-color="black" size="m" label="自定边框"></tm-tag>
				<tm-tag :round="10" text :border="1" borderStyle="dashed" :shadow="0" color="red" size="m" label="标签"> </tm-tag>
				<tm-tag load text :border="1" borderStyle="dashed" :shadow="0" color="green" size="m" label="加载中"> </tm-tag>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="30" _class="text-weight-b" label="设置为可选状态"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<tm-tag checkable color="orange" size="n" label="点我切换选中"></tm-tag>
			</view>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmTag from '@/tmui/components/tm-tag/tm-tag.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
const tabsTitle = ref([
	{ key: '1', title: '选项1', icon: 'tmicon-ios-leaf' },
	{ key: '2', title: '选项2', icon: 'tmicon-ios-umbrella' },
	{ key: '3', title: '选项3', icon: 'tmicon-ios-rocket' },
	{ key: '4', title: '选项4', icon: 'tmicon-ios-partly-sunny' }
])

function testClose() {
	return new Promise((su) => {
		uni.showLoading({ title: '操作中', mask: true })
		setTimeout(() => {
			uni.hideLoading()
			su(true)
		}, 1200)
	})
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
followTheme[Boolean,String]true颜色是否跟随主题变化
transprent[Boolean,String]false是否透明
border[Number,String]0边框宽度
round[Number,String]2圆角0-25,单位rpx
shadow[Number]1投影,0-25
marginArray()=>[10,10]外间距[x,y]x=左右,y=上下
paddingArray()=>[0,0]内间距[x,y]x=左右,y=上下
checkable[Boolean,String]false是否开启标签可选中状态
checked[Boolean,String]false只有当checkable为true时有效
load[Boolean,String]false标签是否处于加载中
size[String]'m',xs|s|m|n|g|lg标签尺寸
fontSize[Number,String]0字体大小
fontColorv3.0.63+[String]""默认空表示自动配色,填写了主题色将强制使用填写的颜色。
closable[Boolean,String]false是否允许被关闭
icon[String]''图标
iconAlign[String]left图标位置,左,右,'left','right'
label[String]''文字
before-closeFunction,nullnull关闭前的回调,可以返回promise。true允许关闭,false不允许关闭

🌹 事件

事件名参数返回数据描述
click点击事件对象tag被点击事件
close--tag被关闭
changebooleanboolean切换选中状态时触发
update:checked状态发生变化时触发

🌽 slot插槽

默认default

🥗 ref方法

💏 文档贡献

此页文档由夏天贡献,如果对该框架感兴趣的可以参与我们一同进步!