---
title: Button 按钮
description: 用于开启一个闭环的操作任务,如“删除”对象、“购买”商品等。
spline: base
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
```
## 代码演示
### 01 组件类型
基础按钮
{{ base }}
图标按钮
{{ icon-btn }}
幽灵按钮
{{ ghost-btn }}
组合按钮
{{ group-btn }}
通栏按钮
{{ block-btn }}
### 02 组件状态
按钮禁用态
{{ disabled }}
### 03 组件样式
按钮尺寸
{{ size }}
按钮形状
{{ shape }}
按钮主题
{{ theme }}
## API
### Button Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
block | Boolean | false | 是否为块级元素 | N
content | String / Slot | - | 按钮内容 | N
custom-dataset | Object | - | 自定义 dataset,可通过 event.currentTarget.dataset.custom 获取。TS 类型:`any` | N
disabled | Boolean | false | 禁用状态 | N
ghost | Boolean | false | 是否为幽灵按钮(镂空按钮) | N
icon | String / Object | - | 图标名称。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
loading | Boolean | false | 是否显示为加载状态 | N
loading-props | Object | - | 透传至 Loading 组件。TS 类型:`LoadingProps`,[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
shape | String | rectangle | 按钮形状,有 4 种:长方形、正方形、圆角长方形、圆形。可选项:rectangle/square/round/circle | N
size | String | medium | 组件尺寸。可选项:extra-small/small/medium/large。TS 类型:`SizeEnum` | N
suffix | Slot | - | 右侧内容,可用于定义右侧图标 | N
theme | String | default | 组件风格,依次为品牌色、危险色。可选项:default/primary/danger/light | N
type | String | - | 同小程序的 formType。可选项:submit/reset | N
variant | String | base | 按钮形式,基础、线框、文字。可选项:base/outline/dashed/text | N
open-type | String | - | 微信开放能力。<br />具体释义:<br />`contact` 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> (*小程序插件中不能使用*);<br />`share` 触发用户转发,使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>;<br />`getPhoneNumber` 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> (*小程序插件中不能使用*);<br />`getUserInfo` 获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息 (*小程序插件中不能使用*);<br />`launchApp` 打开APP,可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>;<br />`openSetting` 打开授权设置页;<br />`feedback` 打开“意见反馈”页面,用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>,开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容;<br />`chooseAvatar` 获取用户头像,可以从 bindchooseavatar 回调中获取到头像信息。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项:contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
hover-class | String | '' | 指定按钮按下去的样式类,按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时,没有点击态效果 | N
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
hover-start-time | Number | 20 | 按住后多久出现点击态,单位毫秒 | N
hover-stay-time | Number | 70 | 手指松开后点击态保留时间,单位毫秒 | N
lang | String | en | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。。<br />具体释义:<br />`en` 英文;<br />`zh_CN` 简体中文;<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项:en/zh_CN/zh_TW | N
session-from | String | - | 会话来源,open-type="contact"时有效 | N
send-message-title | String | 当前标题 | 会话内消息卡片标题,open-type="contact"时有效 | N
send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 | N
send-message-img | String | 截图 | 会话内消息卡片图片,open-type="contact"时有效 | N
app-parameter | String | - | 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 | N
show-message-card | Boolean | false | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 | N
bindgetuserinfo | Eventhandle | - | 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与<a href="https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html">wx.getUserInfo</a>返回的一致,open-type="getUserInfo"时有效 | N
bindcontact | Eventhandle | - | 客服消息回调,open-type="contact"时有效 | N
bindgetphonenumber | Eventhandle | - | 获取用户手机号回调,open-type=getPhoneNumber时有效 | N
binderror | Eventhandle | - | 当使用开放能力时,发生错误的回调,open-type=launchApp时有效 | N
bindopensetting | Eventhandle | - | 在打开授权设置页后回调,open-type=openSetting时有效 | N
bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调,open-type=launchApp时有效 | N
bindchooseavatar | Eventhandle | - | 获取用户头像回调,open-type=chooseAvatar时有效 | N
### Button Events
名称 | 参数 | 描述
-- | -- | --
tap | `event` | 点击按钮,当按钮不为加载或禁用状态时触发
### Button 外部样式类
类名 | 说明
-- | --
t-class | 根节点样式类
t-class-icon | 图标样式类
t-class-loading | 加载样式类
### CSS 变量
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-button-border-radius | @radius-default | -
--td-button-border-width | 4rpx | -
--td-button-danger-active-bg-color | @error-color-7 | -
--td-button-danger-active-border-color | @error-color-7 | -
--td-button-danger-bg-color | @error-color | -
--td-button-danger-border-color | @error-color | -
--td-button-danger-color | @font-white-1 | -
--td-button-danger-dashed-border-color | @butto
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
嵌入式优质项目,资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目。 本人单片机开发经验充足,深耕嵌入式领域,有任何使用问题欢迎随时与我联系,我会及时为你解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明,项目具体内容可查看下方的资源详情。 【附带帮助】: 若还需要嵌入式物联网单片机相关领域开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步。 【本人专注嵌入式领域】: 有任何使用问题欢迎随时与我联系,我会及时解答,第一时间为你提供帮助,CSDN博客端可私信,为你解惑,欢迎交流。 【建议小白】: 在所有嵌入式开发中硬件部分若不会画PCB/电路,可选择根据引脚定义将其代替为面包板+杜邦线+外设模块的方式,只需轻松简单连线,下载源码烧录进去便可轻松复刻出一样的项目 【适合场景】: 相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展来开发出更多功能
资源推荐
资源详情
资源评论
收起资源包目录
基于esp32开发板使用mqtt协议和微信小程序通信.zip(皆可应用在毕设/课设/大作业/实训/竞赛/项目开发) (2000个子文件)
.editorconfig 94B
mqtt.min.js 183KB
date-time-picker.js 15KB
date-time-picker.js 15KB
index.js 13KB
slider.js 11KB
slider.js 11KB
tabs.js 11KB
tabs.js 11KB
upload.js 10KB
upload.js 10KB
index.js 9KB
indexes.js 9KB
indexes.js 9KB
cascader.js 9KB
cascader.js 9KB
index.js 8KB
index.js 8KB
notice-bar.js 7KB
notice-bar.js 7KB
pull-down-refresh.js 7KB
pull-down-refresh.js 7KB
dayjs.min.js 7KB
index.js 7KB
index.js 7KB
utils.js 7KB
utils.js 7KB
message.js 6KB
message.js 6KB
checkbox-group.js 6KB
checkbox-group.js 6KB
calendar.js 6KB
calendar.js 6KB
dialog.js 6KB
dialog.js 6KB
dropdown-item.js 6KB
dropdown-item.js 6KB
image-viewer.js 6KB
image-viewer.js 6KB
picker-item.js 5KB
picker-item.js 5KB
index.js 5KB
instantiationDecorator.js 5KB
instantiationDecorator.js 5KB
sticky.js 5KB
sticky.js 5KB
index.js 5KB
index.js 5KB
duration.js 5KB
rate.js 5KB
rate.js 5KB
grid-item.js 5KB
grid-item.js 5KB
tab-bar-item.js 5KB
tab-bar-item.js 5KB
navbar.js 5KB
navbar.js 5KB
input.js 5KB
input.js 5KB
radio-group.js 4KB
radio-group.js 4KB
picker.js 4KB
picker.js 4KB
skeleton.js 4KB
skeleton.js 4KB
action-sheet.js 4KB
action-sheet.js 4KB
index.js 4KB
transition.js 4KB
transition.js 4KB
stepper.js 4KB
stepper.js 4KB
image.js 4KB
image.js 4KB
textarea.js 4KB
textarea.js 4KB
tree-select.js 4KB
tree-select.js 4KB
radio.js 4KB
radio.js 4KB
swiper.js 4KB
swiper.js 4KB
collapse-panel.js 4KB
collapse-panel.js 4KB
count-down.js 4KB
count-down.js 4KB
customParseFormat.js 4KB
toast.js 4KB
toast.js 4KB
index.js 4KB
button.js 4KB
button.js 4KB
progress.js 3KB
progress.js 3KB
dropdown-menu.js 3KB
dropdown-menu.js 3KB
ru.js 3KB
tag.js 3KB
tag.js 3KB
index.js 3KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
阿齐Archie
- 粉丝: 1w+
- 资源: 2303
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功