---
name: Button
title: 按钮
category: 表单组件
owner: 陈骁
---

## 示例

```atom 基础示例
<template>
    <view class="wrap">
        <view class="mini-btn-content">
            <view class="title">默认态/按下态</view>
            <button type="primary" size="mini" class="mini-btn primary">
                按钮
            </button>
            <button type="default" size="mini" class="mini-btn">按钮</button>
            <button type="warn"    size="mini" class="mini-btn warn">
                按钮
            </button>
        </view>

        <view class="mini-btn-content">
            <view class="title">无效态</view>
            <button type="primary" disabled size="mini" class="mini-btn primary">
                按钮
            </button>
            <button type="default" disabled size="mini" class="mini-btn">
                按钮
            </button>
            <button type="warn" disabled size="mini" class="mini-btn warn">
                按钮
            </button>
        </view>

        <view class="btn-content">
            <button class="btn">
                默认按钮 默认态
            </button>
            <button class="btn" disabled>
                默认按钮 按下/无效态
            </button>
            <button loading class="btn">
                默认按钮 加载态
            </button>
            <button type="primary" class="btn primary">
                主操作按钮 默认态
            </button>
            <button type="primary" class="btn primary" disabled>
                主操作按钮 按下/无效态
            </button>
            <button type="primary" loading class="btn">
                主操作按钮 加载态
            </button>
            <button type="warn" class="btn warn">
                警告类操作按钮 默认态
            </button>
            <button type="warn" class="btn warn" disabled>
                警告类操作按钮 按下/无效态
            </button>
            <button loading class="btn" type="warn">
                警告类操作按钮 加载态
            </button>
        </view>
    </view>
</template>

<script type="config">
    {
        components: {
            button: 'components/Button/Button',
            view: 'components/View/View'
        }
    }
</script>

<style scoped>
.wrap {
    font-size: .16rem;
    padding: .1rem 0;
    background: #fff;
}
.mini-btn-content {
    margin-bottom: .08rem;
}
.title {
    display: inline-block;
    width: 1.34rem;
    font-size: .16rem;
    color: #999;
    padding: 0 0 0 .2rem !important;
}
.mini-btn {
    margin: 0 .2rem 0 0  !important;
    padding: 0 !important;
    width: .57rem;
    height: .28rem;
    line-height: .28rem !important;
}
.mini-btn:last-child {
    margin-right: 0 !important;
}
.btn-content {
    padding-top: .20rem;
}
.btn {
    margin: 0 auto .12rem !important;
    padding: 0 !important;
    width: 3.29rem;
    height: .43rem;
    line-height: .44rem;
}
</style>
```

## API
### Props



名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
size | string | default | 可选 | 大小：default（默认尺寸）；mini（小尺寸） | -
type | string | default | 可选 | 大小：primary（蓝色）；default（白色）；warn（红色） | -
plain | boolean | false | 可选 | 按钮是否镂空，背景色透明。 | -
formType | string | - | 可选 | 用于&nbsp;Form&nbsp;组件，点击分别会触发组件的&nbsp;submit/reset&nbsp;事件。 | -
openType | string | - | 可选 | 手百开放能力：<br>-&nbsp;contact：打开客服会话。<br>-&nbsp;share：触发用户分享<br>-&nbsp;getUserInfo：获取用户信息<br>-&nbsp;getPhoneNumber：获取用户手机号<br>-&nbsp;openSetting：打开授权设置页 | -
hoverClass | string | button-hover | 可选 | 点击态。指定按钮按下去的样式类。当&nbsp;hover-class=”none”&nbsp;时，没有点击态效果。<br>`button-hover`&nbsp;默认为&nbsp;{background-color:&nbsp;rgba(0,&nbsp;0,&nbsp;0,&nbsp;0.1);&nbsp;opacity:&nbsp;0.7;} | -
hoverStopPropagation | boolean | false | 可选 | 指定是否阻止本节点的祖先节点出现点击态。 | -
hoverStartTime | number | 20 | 可选 | 按住后多久出现点击态，单位毫秒。 | -
hoverStayTime | number | 70 | 可选 | 手指松开后点击态保留时间，单位毫秒。 | -
disabled | boolean | false | 可选 | 是否禁用 | -
loading | boolean | false | 可选 | 名称前是否带有&nbsp;loading&nbsp;图标 | -

### Slots



名称 | 描述
--- | ---
default | 按钮子节点

### Events
无