# t-button

Button 按钮

t-button 组件介绍

t-button 按钮组件，封装了常用的按钮样式和行为。支持多种类型（主要、次要、危险等）、尺寸，并能响应点击事件。支持小程序开放能力、表单提交等功能。

t-button 平台兼容

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

t-button 基础用法

基础用法参考 demo/button/button.uvue，通过 type 属性设置主题，使用 size 属性设置尺寸。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<introduction title="主题">
			<t-button class="mb-15"
					  type="primary">主要</t-button>
			<t-button class="mb-15"
					  type="info">信息</t-button>
			<t-button class="mb-15"
					  type="warning"
					  @click="test1">警告</t-button>
			<t-button class="mb-15"
					  type="error">危险</t-button>
		</introduction>
		<introduction title="主题+size">
			<view class="fais">
				<t-button class="mb-15 w-128"
						  type="primary"
						  :loading="true"
						  size="large">大</t-button>
				<t-button class="mb-15 w-98"
						  type="success"
						  size="medium">正常</t-button>
				<t-button class="mb-15 w-60"
						  type="info"
						  size="small">小</t-button>
				<t-button class="mb-15 w-46"
						  type="warning"
						  size="mini">迷你</t-button>
			</view>
		</introduction>
		<introduction title="定制">
			<view class="fl fjcb plr-15">
				<t-button class="twhr-40!"
						  left-icon-box-class="w-0!"
						  right-icon-class="s-23!"
						  right-icon="server-fill"
						  type="primary"></t-button>
				<t-button class="twhr-40!"
						  left-icon-box-class="w-0!"
						  right-icon="checkbox-mark"
						  type="success"></t-button>
				<t-button class="twhr-40!"
						  left-icon-box-class="w-0!"
						  right-icon-class="s-23!"
						  right-icon="star"
						  type="warning"></t-button>
				<t-button class="twhr-40!"
						  left-icon-box-class="w-0!"
						  right-icon-class="s-23!"
						  right-icon="trash"
						  type="error"></t-button>
			</view>
		</introduction>
		<introduction title="自定义样式覆盖主题">
			<t-button class="mb-15 bg-#0AB99C"
					  text-class="c-#fff">覆盖背景</t-button>
			<t-button class="mb-15 r-90 ptb-15 bil-#ff667f,#fdb247"
					  text-class="c-#fff">镂空覆盖测试</t-button>
			<t-button class="mb-15 r-90 ptb-15 bil-#a531dc,#4300b1"
					  text-class="c-#fff">镂空覆盖测试</t-button>
		</introduction>
		<introduction title="简易跳转功能">
			<t-button type="primary"
					  path="/demo/index/index">跳转</t-button>
		</introduction>
		<introduction title="防抖-节流">
			<t-button type="primary"
					  class="mb-15"
					  @click="test1"
					  :tdTime="1000"
					  :debounce="true">防抖(在1000ms内，只有最后一次操作)</t-button>
			<t-button type="primary"
					  @click="test1"
					  :tdTime="1000"
					  :throttle="true">节流(在1000ms内，只能触发一次)</t-button>
		</introduction>
	</view>
</template>

<script setup>
	const loading = ref(true)
	const disabled = ref(true)
	function test1() {
		console.log('test')
	}
	function test() {
		loading.value = !loading.value
	}
</script>

t-button Props

属性名	说明	类型	默认值
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
hover	是否启用点击效果	boolean	true
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
leftIcon	左侧图标，支持图标名称或图片地址	string	''
rightIcon	右侧图标，支持图标名称或图片地址	string	''
loading	是否显示加载状态	boolean	false
loadingIcon	加载状态的图标名称	string	'moments'
color	字体、图标颜色	string	''
text	是否为文本按钮样式	boolean	false
rounded	是否为圆角按钮	boolean	false
hoverStopPropagation	是否阻止点击态冒泡	boolean	false
hoverStartTime	按住后多久出现点击态，单位毫秒	number	20
hoverStayTime	手指松开后点击态保留时间，单位毫秒	number	70
pt	样式穿透属性，用于自定义组件内部样式	UTSJSONObject	{}
native	是否使用原生 button 标签	boolean	false
formType	表单提交类型，可选 submit、reset	string	''
openType	小程序开放能力	string	''
lang	指定返回用户信息的语言	string	''
sessionFrom	会话来源	string	''
sendMessageTitle	发送消息卡片标题	string	''
sendMessagePath	发送消息卡片路径	string	''
sendMessageImg	发送消息卡片图片	string	''
showMessageCard	显示会话内消息卡片	boolean	false
appParameter	打开 APP 时向 APP 传递的参数	string	''
groupId	打开群聊卡片的群号	string	''
guildId	打开频道卡片的频道号	string	''
publicId	打开公众号卡片的公众号 ID	string	''
phoneNumberNoQuotaToast	无额度提示	boolean	false
createliveactivity	创建直播间活动	string	''

size 说明

• large：大尺寸，按钮的尺寸较大，适用于需要强调操作或易于点击的区域
• medium：中尺寸，按钮的尺寸适中，可能是默认尺寸，适用于大多数场景
• small：小尺寸，按钮的尺寸较小，适用于空间有限或操作不是特别重要的区域
• mini：迷你，按钮的尺寸最小，适用于紧凑布局或辅助操作

type 说明

• info：信息提示场景，通常用于提供一般的通知信息
• primary：主要操作场景，用于强调某些主要的操作或信息
• error：错误提示场景，用于指示出现了错误或问题
• warning：警告提示场景，用于提示用户关于潜在的问题
• success：成功提示场景，用于指示一个操作或过程已经成功完成

effect 说明

• normal：正常主题
• dark：深色主题
• light：浅色主题
• plain：镂空主题

t-button Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
getuserinfo	获取用户信息	-
contact	客服消息	-
getphonenumber	获取用户手机号	-
error	错误事件	-
opensetting	打开设置	-
launchapp	打开 APP	-
chooseavatar	选择头像	-
chooseaddress	选择地址	-
chooseinvoicetitle	选择发票抬头	-
addgroupapp	添加群应用	-
subscribe	订阅消息	-
login	登录	-
getrealtimephonenumber	获取实时手机号	-
agreeprivacyauthorization	同意隐私协议	-

t-button Slots

插槽名	说明
default	默认插槽，用于设置按钮内容