# t-tag

Tag 标签

t-tag 组件介绍

t-tag 用于以标签形式展示信息，支持可关闭、主题样式、动态隐藏以及自定义尺寸和关闭图标样式。适用于标记分类、筛选条件、状态标识等场景。

t-tag 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-tag 基础用法

基础用法参考 demo/tag/tag.uvue，通过默认插槽设置标签文本，通过 closable 属性开启关闭功能。

<template>
	<view>
		<t-card class='mlrt-15'
				title="Tag 标签"
				sub-title="轻量级的方式来展示和操作标签信息，支持可关闭、主题样式、动态隐藏以及自定义尺寸和关闭图标样式"></t-card>
		<tui-theme-switch></tui-theme-switch>
		<introduction title="基础功能+状态展示">
			<view class="fl fww">
				<t-tag size="large"
					   type="primary"
					   class="mrb-15">默认</t-tag>
				<t-tag size="medium"
					   class="mrb-15"
					   type="success">成功</t-tag>
				<t-tag size="small"
					   class="mrb-15"
					   type="error">错误</t-tag>
				<t-tag size="mini"
					   class="mrb-15"
					   type="warning">警告</t-tag>
			</view>
			<view class="fl fww">
				<t-tag size="large"
					   type="primary"
					   effect="normal"
					   class="mrb-15">normal</t-tag>
				<t-tag size="medium"
					   class="mrb-15"
					   effect="dark"
					   type="success">dark</t-tag>
				<t-tag size="small"
					   class="mrb-15"
					   effect="light"
					   type="error">light</t-tag>
				<t-tag size="mini"
					   class="mrb-15"
					   effect="plain"
					   type="warning">plain</t-tag>
			</view>
		</introduction>
		<introduction title="可移除标签">
			<view class="fl fww">
				<t-tag size="large"
					   type="primary"
					   :closable="true"
					   class="mrb-15">默认</t-tag>
				<t-tag size="medium"
					   class="mrb-15"
					   :closable="true"
					   type="success">成功</t-tag>
				<t-tag size="small"
					   :closable="true"
					   class="mrb-15"
					   type="error">错误</t-tag>
				<t-tag size="mini"
					   :closable="true"
					   class="mrb-15"
					   type="warning">警告</t-tag>
			</view>
		</introduction>
		<introduction title="动态编辑">
			<view class="fl fww">
				<t-tag v-for="(item,index) in tags"
					   :key="index"
					   :name='`${index}`'
					   type="primary"
					   class="mrb-15 "
					   :closable="true"
					   @close="onclose">{{item['name']}}</t-tag>
				<t-tag v-if="inputVisible"
					   type="primary"
					   @click="inputVisible=false">+NewTag</t-tag>
				<input class="b-1,s,#e3e3e3 w-75 r-5 h-35 plr-5"
					   :focus="true"
					   v-else
					   v-model="inputvalue"
					   @blur="blur"></input>
			</view>
		</introduction>
	</view>
</template>
<script setup>
	const inputVisible = ref(true)
	const inputvalue = ref('')
	const tags = ref<UTSJSONObject[]>([
		{ name: '标签一' },
		{ name: '标签二' },
		{ name: '标签三' },
		{ name: '标签四' },
		{ name: '标签五' }
	])
	function blur() {
		if (inputvalue.value != '') {
			tags.value.push({ name: inputvalue.value })
			inputvalue.value = ''
			inputVisible.value = true
		}
	}
	function onclose(e : string) {
		console.log(e)
	}
</script>

t-tag Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'light'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
name	标签名称，关闭时返回	string	''
closable	是否可关闭	boolean	false
closeClass	关闭按钮样式类，对应外部类 close-class	any	''
labelClass	标签文本样式类，对应外部类 label-class	any	''

t-tag Events

事件名	说明	回调参数
click	点击时触发	-
close	关闭标签时触发，返回标签 name	name: string
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

外部类

类名	说明
close-class	关闭按钮样式
label-class	标签文本样式