button

基础库 1.0.0 开始支持本组件。


参数说明

属性名类型默认值必填说明最低版本
sizestringdefault按钮的大小1.0.0
typestringdefault按钮的样式类型1.0.0
disabledbooleanfalse是否禁用1.0.0
loadingbooleanfalse是否带 loading 图标1.0.0
form-typestring用于嵌在 form 组件中,控制 submit/reset1.0.0
open-typestring用于调用开放能力, 详情见下方1.0.0
hover-classstringbutton-hover点击状态的样式类1.0.0
hover-start-timenumber20按住后多久出现点击态,单位毫秒1.0.0
hover-stay-timenumber70手指松开后点击态保留时间,单位毫秒1.0.0
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.0.0
bindgetphonenumbereventhandle获取用户手机号回调,只在 open-type=getPhoneNumber 时有效1.14.0

size 取值范围

说明最低支持版本
default默认大小1.0.0
mini小尺寸1.0.0

type 取值范围

说明最低支持版本
primary红色1.0.0
default白色1.0.0

form-type 取值范围

说明最低支持版本
submit提交表单1.0.0
reset重置表单1.0.0

open-type 有效值

说明最低支持版本
share触发用户转发, 分享内容到微头条1.0.0
getPhoneNumber获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,详细说明1.14.0
contact跳转到客服页面 详细说明1.44.0

效果示例


代码示例

开发者工具中预览

<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>

<button type="default">页面次要操作 Normal</button>
<button type="default" loading="true">页面次要操作 Loading</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>

<view class="mini-buttons">
  <button class="mini-btn" type="primary" size="mini">按钮</button>
  <button class="mini-btn" type="default" size="mini">按钮</button>
</view>
.my-button {
  border-radius: 20px;
}
.my-button:after {
  border-color: #f00;
  border-radius: 40px; /* 需要设置为按钮圆角的两倍 */
}

.my-button-2 {
  border: 1px solid;
}
.my-button-2:after {
  display: none;
}

Bug & Tip

  • Tip:目前,<button> 组件的边框不是通过 border 属性来控制的,而是有个 :after 伪类,所以如果需要修该边框样式,请对该伪类元素设置样式。
<button class="my-button">边框修改</button>
<button class="my-button-2">取消默认边框</button>
  • Tip: button-hover 的样式为为 { background-color: rgba(0, 0, 0, 0.1); opacity: 0.7; }
点击纠错