Skip to main content

Button

Button.

Example

js

const types = ['default', 'primary', 'warn']
const pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},

onShareAppMessage() {
return {
title: 'button',
path: 'page/component/pages/button/button'
}
},

setDisabled() {
this.setData({
disabled: !this.data.disabled
})
},

setPlain() {
this.setData({
plain: !this.data.plain
})
},

setLoading() {
this.setData({
loading: !this.data.loading
})
},

handleContact(e) {
console.log(e.detail)
},

handleGetPhoneNumber(e) {
console.log(e.detail)
},

handleGetUserInfo(e) {
console.log(e.detail)
},

handleOpenSetting(e) {
console.log(e.detail.authSetting)
},

handleGetUserInfo(e) {
console.log(e.detail.userInfo)
}
}

for (let i = 0; i < types.length; ++i) {
(function (type) {
pageObject[type] = function () {
const key = type + 'Size'
const changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
}(types[i]))
}

Page(pageObject)

bxml

<view class="page-body">
<view class="btn-area" id="buttonContainer">
<button type="primary">Page Main Normal</button>
<button type="primary" loading="true">Page Main Loading</button>
<button type="primary" disabled="true">Page Main Disabled</button>

<button type="default">Page Second Normal</button>
<button type="default" disabled="true">Page Second Disabled</button>

<button type="warn">Warn Normal</button>
<button type="warn" disabled="true">Warn Disabled</button>

<view class="button-sp-area">
<button type="primary" plain="true">Button</button>
<button type="primary" disabled="true" plain="true">Disable Button</button>

<button type="default" plain="true"></button>
<button type="default" disabled="true" plain="true">Button</button>

<button class="mini-btn" type="primary" size="mini">Button</button>
<button class="mini-btn" type="default" size="mini">Button</button>
<button class="mini-btn" type="warn" size="mini">Button</button>
</view>
</view>
</view>

bxss

button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.button-sp-area{
margin: 0 auto;
width: 60%;
}
.mini-btn{
margin-right: 10rpx;
}

Bug & Tip

  • tip: button-hover Default is{background-color: rgba(0, 0, 0, 0.1) opacity: 0.7}
  • tip: Currently set form-type of button Object in the current component form Effective. Thus, will button Is encapsulated in a custom component, and form In addition to the custom component, the button of form-type Failure.

Props

NameTypeDescriptionDefault
sizestringButton size
typestringStyle type of on"default"
plainbooleanWhether the on is hollow, the background color is transparentfalse
disabledbooleanIs it disabled?false
loadingbooleanDoes the name come with loading iconfalse
hover-classstringSpecifies the style class for which the on is pressed. when hover-class="none" There is no click state effect"button-hover"
hover-stop-propagationbooleanSpecifies whether to prevent this node's ancestor from clickingfalse
hover-start-timenumberHow long does it take to click, in milliseconds?20
hover-stay-timenumberClick hold time after finger release, in milliseconds70
form-typeFormTypeUsed for form Component, click separately to trigger form Component submit/reset event
open-typeOpenTypeMini Program open ability 

Events

NameDescription
bindtapThe tap event handler of the button
bindtapcaptureTrigger when button tap event capture phase, see more about DOM3-EVENTS
bindtouchstartThe start event When touch the button
bindopensettingCallback after opening the authorization settings page, open type = openSetting
bindgetuserprofileWhen the user clicks the on, the user information will be returned, open-type."getuserprofile" is valid
bindgetphonenumberGets the user's phone number callback, valid when open-type = getPhoneNumber
bindgetemailaddressGets the user's email address callback