按钮
默认按钮
vue
<template>
<jp-button>默认按钮</jp-button>
<jp-button type="primary">主要按钮</jp-button>
<jp-button type="error">错误按钮</jp-button>
<jp-button type="warning">警告按钮</jp-button>
<jp-button type="success">成功按钮</jp-button>
</template>
plain
vue
<template>
<jp-button plain>plain</jp-button>
<jp-button type="primary" plain>主要按钮</jp-button>
<jp-button type="error" plain>错误按钮</jp-button>
<jp-button type="warning" plain>警告按钮</jp-button>
<jp-button type="success" plain>成功按钮</jp-button>
</template>
圆角按钮
vue
<template>
<jp-button shape="circle">圆角按钮</jp-button>
<jp-button type="primary" shape="circle">主要按钮</jp-button>
<jp-button type="error" shape="circle">错误按钮</jp-button>
<jp-button type="warning" shape="square">警告按钮</jp-button>
<jp-button type="success" shape="square">成功按钮</jp-button>
</template>
disabled
vue
<template>
<jp-button disabled>默认按钮</jp-button>
<jp-button type="primary" disabled>主要按钮</jp-button>
<jp-button type="error" disabled>错误按钮</jp-button>
<jp-button type="warning" disabled>警告按钮</jp-button>
<jp-button type="success" disabled>成功按钮</jp-button>
<jp-button type="text">文本按钮</jp-button>
</template>
支持 slot
vue
<template>
<jp-button>
支持 slot
<text class="jp-icon-plus"></text>
</jp-button>
<jp-button>
<text class="jp-icon-plus"></text>
支持 slot
</jp-button>
</template>
加载中
vue
<template>
<jp-button loading>loading</jp-button>
</template>
水波纹效果 ripple
vue
<template>
<jp-button ripple>水波纹效果开启</jp-button>
<jp-button :ripple="false">水波纹效果关闭</jp-button>
</template>
尺寸 size：default、medium、mini
vue
<template>
<jp-button size="default">default</jp-button>
<jp-button size="medium">medium</jp-button>
<jp-button size="mini">mini</jp-button>
</template>
props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| hairLine | Boolean | false | 是否细边框 |
| type | String | 'default' | 按钮的预置样式 |
| size | String | 'default' | 按钮尺寸 |
| shape | String | 'square' | 按钮形状 |
| plain | Boolean | false | 按钮是否镂空 |
| disabled | Boolean | false | 是否禁止状态 |
| loading | Boolean | false | 是否加载中 |
| openType | String | '' | 开放能力 |
| formType | String | '' | 用于 'form' 组件 |
| appParameter | String | '' | 向 APP 传递的参数 |
| hoverStopPropagation | Boolean | false | 阻止祖先节点点击态 |
| lang | String | 'en' | 返回用户信息的语言 |
| sessionFrom | String | '' | 会话来源 |
| sendMessageTitle | String | '' | 消息卡片标题 |
| sendMessagePath | String | '' | 消息卡片跳转路径 |
| sendMessageImg | String | '' | 消息卡片图片 |
| showMessageCard | Boolean | false | 显示消息卡片提示 |
| hoverBgColor | String | '' | 按钮背景颜色 |
| rippleBgColor | String | '' | 水波纹的背景颜色 |
| ripple | Boolean | true | 是否开启水波纹效果 |
| hoverClass | String | '' | 按下的类名 |
| customStyle | Object | {} | 自定义样式 |
事件列表：
| 事件名 | 描述 |
|---|---|
| click | 按钮点击 |
| getphonenumber | 获取电话号码 |
| getuserinfo | 获取用户信息 |
| error | 开放能力发生错误 |
| opensetting | 打开授权设置页后回调 |
| launchapp | 打开 APP 成功的回调 |