Button 按钮

介绍

按钮，提供几种基础样式和尺寸，可自定义图标。

引入

"usingComponents": {
    "m-button": "mind-ui-weapp/button/index"
}

示例

按钮类型

按钮支持 default、primary、success、info、warning、danger 六种类型，默认为 default。

<m-button>默认按钮</m-button>
<m-button type="primary">主要按钮</m-button>
<m-button type="success">成功按钮</m-button>
<m-button type="info">信息按钮</m-button>
<m-button type="warning">警告按钮</m-button>
<m-button type="danger">危险按钮</m-button>

朴素按钮

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<m-button type="primary" plain>朴素按钮</m-button>
<m-button type="success" plain>朴素按钮</m-button>

圆角按钮

通过 round 属性来设置圆角按钮。

<m-button type="primary" round>圆角按钮</m-button>
<m-button type="success" round>圆角按钮</m-button>

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<m-button type="primary" disabled>禁用状态</m-button>
<m-button type="success" disabled>禁用状态</m-button>

按钮尺寸

支持 normal、small、mini 三种尺寸，默认为 normal。

<m-button type="primary" size="normal">普通按钮</m-button>
<m-button type="primary" size="small">小型按钮</m-button>
<m-button type="primary" size="mini">迷你按钮</m-button>

自定义颜色

通过 color 属性可以自定义按钮的颜色。

<m-button color="#7232dd">单色按钮</m-button>

Properties

参数	说明	类型	可选值	默认值
custom-class	根节点样式类	String	—	—
size	大小	String	medium small mini	—
type	类型	String	ghost white primary success warning danger info	—
plain	朴素按钮	Boolean	—	false
round	圆角	Boolean	—	false
loading	加载中	Boolean	—	false
disabled	禁用	Boolean	—	false
color	字体颜色	String	—	—
bgcolor	背景色，支持传入 linear-gradient 渐变色	String	—	—
open-type	微信开放能力	String	—	—

Events

事件名称	说明	返回值
bind:click	非 disabled，loading 状态时可触发的点击事件	—
bind:contact	客服消息回调	—
bind:getphonenumber	获取用户手机号回调	—