Button 按钮

按钮用于传递用户触摸时会触发的操作

使用指南

在 Taro 文件中引入组件

  1. import { AtButton } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

  1. @import "~taro-ui/dist/style/components/button.scss";
    @import "~taro-ui/dist/style/components/loading.scss";

一般用法

  1. <AtButton>按钮文案</AtButton>
    <AtButton type='primary'>按钮文案</AtButton>
    <AtButton type='secondary'>按钮文案</AtButton>

不同尺寸

  1. <AtButton type='primary' size='normal'>按钮文案</AtButton>
    <AtButton type='primary' size='small'>按钮文案</AtButton>

带 loading icon

  1. <AtButton loading type='primary'>按钮文案</AtButton>

Button 参数

微信H5参数说明类型可选值默认值
√√type按钮的类型Stringprimary, secondary-
√√size按钮的大小Stringnormal, smallnormal
√√circle设置按钮圆角Boolean-false
√√full是否通栏样式（即按钮宽度为屏幕宽度时的样式）Boolean-false
√√loading设置按钮的载入状态Boolean-false
√√disabled[1]设置按钮为禁用态（不可点击）Boolean-false
√-formType[2]参考微信button文档Stringsubmit, reset-
√-openType参考微信button文档Stringcontact, share, getUserInfo, getPhoneNumber, launchApp, openSetting, feedback, getRealnameAuthInfo-
√-lang参考微信button文档String-en
√-sessionFrom参考微信button文档String--
√-sendMessageTitle参考微信button文档String--
√-sendMessagePath参考微信button文档String--
√-sendMessageImg参考微信button文档String--
√-showMessageCard参考微信button文档Boolean-false
√-appParameter参考微信button文档String--

注1：由于微信 button 的部分样式属性和 AtButton 有冲突，所以暂未被 AtButton 支持。支持的属性以上表为准

注2：formType 为 submit、reset 都可以触发 Form 或 AtForm 的 submit、reset 事件，但是由于微信的限制，只能取到 event.detail 的部分值，比如 formid，不能取到 value。而 reset 也不会使 AtForm 里的 AtInput 等重置

Button 事件

微信H5事件名称说明返回参数
√√onClick点击按钮时触发event 对象
√-onGetUserInfo参考微信button文档event 对象
√-onContact参考微信button文档event 对象
√-onGetPhoneNumber参考微信button文档event 对象
√-onError参考微信button文档event 对象
√-onOpenSetting参考微信button文档event 对象

Button按钮 - 图1