qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Button 按钮


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

使用指南

在 Taro 文件中引入组件

import { AtButton } from 'taro-ui-vue3'

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/button.scss";

一般用法

<template>
  <view>
    <AtButton>按钮文案</AtButton>
    <AtButton type='primary'>按钮文案</AtButton>
    <AtButton type='secondary'>按钮文案</AtButton>
  </view>
</template>

传递参数

<template>
  <view>
    <AtButton type='secondary' @click="(e) => handleClick('secondary')">事件传参</AtButton>
    <AtButton type='primary' @click="handleClick.bind(this, 'primary')">事件传参</AtButton>
  </view>
</template>

不同尺寸

<template>
  <view>
    <AtButton type='primary' size='normal'>按钮文案</AtButton>
    <AtButton type='primary' size='small'>按钮文案</AtButton>
  </view>
</template>

带 loading icon

<template>
  <view>
    <AtButton loading type='primary'>按钮文案</AtButton>
  </view>
</template>

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 对象