支付宝小程序扩展表单 按钮·Button

按钮，用户只需单击一下即可执行操作并做出选择。常用于表单提交、界面跳转、模块引导点击。具体用法和小程序框架中 button 保持一致，在 button 基础上做了样式的封装。

扫码体验

示例代码

{
 "defaultTitle": "Button",
 "usingComponents": {
   "button": "mini-ali-ui/es/button/index",
   "radio": "mini-ali-ui/es/am-radio/index",
   "checkbox": "mini-ali-ui/es/am-checkbox/index"
 }
}
<view class="container">
 <button onTap="onTest" showLoading="{{showLoading}}" dataName="{{dataName}}" type="{{type}}" subtitle="{{subtitle}}" disabled="{{disabled}}" shape="{{shape}}" capsuleSize="{{capsuleSize}}" capsuleMinWidth="{{capsuleMinWidth}}">
   {{title}}
 </button>
 <view>主标题</view>
 <input value="{{title}}" onInput="titleChange"/>
 <view>副标题</view>
 <input value="{{subtitle}}" onInput="subtitleChange"/>
 <view>按钮类型</view>
 <radio-group class="radio-group" onChange="typeChange" name="type">
   <label class="radio" a:for="{{types}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
   </label>
 </radio-group>
 <view>形状</view>
 <radio-group class="radio-group" onChange="shapeChange" name="shape">
   <label class="radio" a:for="{{shapes}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
   </label>
 </radio-group>
 <view>胶囊按钮大小</view>
 <radio-group class="radio-group" onChange="sizeChange" name="size">
   <label class="radio" a:for="{{capsuleSizes}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
   </label>
 </radio-group>
 <view>是否禁用</view>
 <checkbox onChange='onDisableChange'/>
 <view>是否限制胶囊按钮最小宽度</view>
 <checkbox onChange='onMinWidthChange'/>
 <view>是否现实loading</view>
 <checkbox onChange='onLoadingChange'/>
</view>
.container {
  padding: 20rpx;
}
.container button {
  margin-bottom: 24rpx;
}

Page({
  data: {
    title: '按钮操作 Normal',
    subtitle: '',
    disabled: false,
    dataName: '1',
    type: '',
    shape: 'default',
    capsuleSize: 'medium',
    capsuleMinWidth: false,
    showLoading: false,
    types: [
      { name: 'default', value: 'default', checked: true },
      { name: 'primary', value: 'primary' },
      { name: 'ghost', value: 'ghost' },
      { name: 'text', value: 'text' },
      { name: 'warn', value: 'warn' },
      { name: 'warn-ghost', value: 'warn-ghost' },
      { name: 'light', value: 'light' },
    ],
    shapes: [
      { name: 'default', value: 'default', checked: true },
      { name: 'capsule', value: 'capsule' },
    ],
    capsuleSizes: [
      { name: 'small', value: 'small' },
      { name: 'medium', value: 'medium', checked: true },
      { name: 'large', value: 'large' },
    ],
  },
  onLoad() {
  },
  typeChange(e) {
    this.setData({
      type: e.detail.value,
    });
  },
  shapeChange(e) {
    this.setData({
      shape: e.detail.value,
    });
  },
  sizeChange(e) {
    this.setData({
      capsuleSize: e.detail.value,
    });
  },
  titleChange(e) {
    this.setData({
      title: e.detail.value,
    });
  },
  subtitleChange(e) {
    this.setData({
      subtitle: e.detail.value,
    });
  },
  onDisableChange(e) {
    this.setData({
      disabled: e.detail.value,
    });
  },
  onMinWidthChange(e) {
    this.setData({
      capsuleMinWidth: e.detail.value,
    });
  },
  onTap() {
    // e.target.dataset.name
  },
  onLoadingChange(e) {
    this.setData({
      showLoading: e.detail.value,
    });
  },
});

属性