t-button
Button 按钮
组件介绍
t-button 按钮组件，封装了常用的按钮样式和行为。支持多种类型（主要、次要、危险等）、尺寸，并能响应点击事件。支持小程序开放能力、表单提交等功能。
平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
基础用法
基础用法参考 demo/button/button.uvue，通过 type 属性设置主题，使用 size 属性设置尺寸。
vue
<template>
<!-- 基础按钮 -->
<t-button class="mb-30">默认按钮</t-button>
<t-button class="mb-30" type="primary">主要按钮</t-button>
<t-button class="mb-30" type="info">信息按钮</t-button>
<t-button class="mb-30" type="warning">警告按钮</t-button>
<t-button class="mb-30" type="error">危险按钮</t-button>
<!-- 不同主题 -->
<t-button class="mb-30" type="primary" effect="normal">主要按钮</t-button>
<t-button class="mb-30" type="primary" effect="dark">深色按钮</t-button>
<t-button class="mb-30" type="primary" effect="light">浅色按钮</t-button>
<t-button class="mb-30" type="primary" effect="plain">镂空按钮</t-button>
<!-- 不同尺寸 -->
<t-button class="mb-30" left-icon="eye" type="primary" size="large">大按钮</t-button>
<t-button class="mb-30" left-icon="eye" type="success" size="medium">中按钮</t-button>
<t-button class="mb-30" left-icon="eye" type="info" size="small">小按钮</t-button>
<t-button class="mb-30" left-icon="eye" type="warning" size="mini">迷你按钮</t-button>
<!-- 加载状态 -->
<t-button class="mb-30" :loading="true">加载中</t-button>
<!-- 图标按钮 -->
<t-button class="mb-30" left-icon="eye" type="primary">左侧图标</t-button>
<t-button class="mb-30" right-icon="setting" type="success">右侧图标</t-button>
</template>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：镂空主题
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 | 同意隐私协议 | - |
Slots
| 插槽名 | 说明 |
|---|---|
default | 默认插槽，用于设置按钮内容 |