Button 按钮

概述

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

使用指南

在.vue中引入组件

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

在main.js中引入样式文件

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

示例

一般用法

<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	用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail中获取到的值同wx.getUserInfo	-
v-on:contact	客服消息回调	-
v-on:getphonenumber	获取用户手机号回调	-
v-on:error	当使用开放能力时，发生错误的回调	-