> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/ji-chu-zu-jian/button-an-niu.md).

# Button 按钮

## 概述

基础组件，触发业务逻辑时使用

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iButton from 'iview-mpvue/dist/components/button/button'
    export default {
        components: {
            'i-button': iButton
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/button/style/css'
```

## 示例

```markup
一般用法

<i-button v-on:click="handleClick">默认按钮</i-button>
<i-button v-on:click="handleClick" type="error" :long="true">联通两边按钮</i-button>
<i-button v-on:click="handleClick" type="primary">Primary</i-button>
<i-button v-on:click="handleClick" type="ghost">Ghost</i-button>
<i-button v-on:click="handleClick" type="info">Info</i-button>
<i-button v-on:click="handleClick" type="success">Success</i-button>
<i-button v-on:click="handleClick" type="warning">Warning</i-button>
<i-button v-on:click="handleClick" type="error">Error</i-button>

不同尺寸

<i-button v-on:click="handleClick" type="primary" size="large">大尺寸</i-button>
<i-button v-on:click="handleClick" type="primary" size="default">默认尺寸</i-button>
<i-button v-on:click="handleClick" type="primary" size="small">小尺寸</i-button>

圆角的不同尺寸

<i-button v-on:click="handleClick" type="success" shape="circle" size="large">大尺寸</i-button>
<i-button v-on:click="handleClick" type="success" shape="circle">默认尺寸</i-button>
<i-button v-on:click="handleClick" type="success" shape="circle" size="small">小尺寸</i-button>

<i-button v-on:click="handleClick" type="primary" :loading="true">加载中按钮</i-button>

<i-button v-on:click="handleClick" type="primary" :disabled="true">禁用按钮</i-button>
```

## API

Panel properties

| 属性                 | 说明                                                                     | 类型      | 默认值    |
| ------------------ | ---------------------------------------------------------------------- | ------- | ------ |
| i-class            | 自定义 class 类名                                                           | String  | -      |
| type               | 按钮类型，可选值为 default, primary, ghost, info, success, warning, error 或者不设置 | String  | -      |
| inline             | 是否为行内元素，开启后宽度为自适应                                                      | Boolean | false  |
| size               | 按钮大小，可选值为 large、small、default 或者不设置                                    | String  | -      |
| shape              | 按钮形状，可选值为 circle 和 square                                              | String  | square |
| disabled           | 设置按钮为禁用状态                                                              | Boolean | false  |
| loading            | 设置按钮为加载中状态                                                             | Boolean | false  |
| long               | 开启后，按钮没有间距                                                             | Boolean | false  |
| open-type          | 微信开放能力                                                                 | String  | -      |
| app-parameter      | 打开 APP 时，向 APP 传递的参数                                                   | String  | -      |
| hover-start-time   | 按住后多久出现点击态，单位毫秒                                                        | Number  | 20     |
| hover-stay-time    | 手指松开后点击态保留时间，单位毫秒                                                      | Number  | 70     |
| session-from       | 会话来源                                                                   | String  | -      |
| send-message-title | 会话内消息卡片标题                                                              | String  | 当前标题   |
| send-message-path  | 会话内消息卡片点击跳转小程序路径                                                       | String  | 当前分享路径 |
| send-message-img   | 会话内消息卡片图片                                                              | String  | 截图     |
| send-message-card  | 显示会话内消息卡片                                                              | Boolean | false  |

Button events

| 事件名                 | 说明                                                                   | 返回值 |
| ------------------- | -------------------------------------------------------------------- | --- |
| v-on:click          | 按钮在可用状态被点击时触发                                                        | -   |
| v-on:getuserinfo    | <p>用户点击该按钮时，会返回获取到的用户信息，从返回参数的</p><p>detail中获取到的值同wx.getUserInfo</p> | -   |
| v-on:contact        | 客服消息回调                                                               | -   |
| v-on:getphonenumber | 获取用户手机号回调                                                            | -   |
| v-on:error          | 当使用开放能力时，发生错误的回调                                                     | -   |