# Button 按钮

# 介绍

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

# 引入

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

# 示例

# 按钮类型

按钮支持 defaultprimarysuccessinfowarningdanger 六种类型,默认为 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>

# 按钮尺寸

支持 normalsmallmini 三种尺寸,默认为 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 disabledloading 状态时可触发的点击事件
bind:contact 客服消息回调
bind:getphonenumber 获取用户手机号回调