mpx-cube-ui

# Cube-Button 按钮

# 介绍

操作按钮，提供了不同的样式、状态以及小程序的按钮功能，常用于触发一个点击操作。

# 示例

# 样式

除了默认样式外，可以通过设置 primary、bolder 、outline、inline、light属性来改变按钮的样子，也可以组合多重属性呈现不同的效果。

收起 
<cube-button>默认按钮</cube-button>
<cube-button primary>主要按钮</cube-button>
<cube-button bolder>粗体文字</cube-button>
<cube-button outline>细框按钮</cube-button>
<cube-button inline>内联按钮</cube-button>
<cube-button light>明亮按钮</cube-button>
<cube-button outline primary>outline - primary</cube-button>
<cube-button inline outline>inline - outline</cube-button>
<cube-button inline primary>inline - primary</cube-button>
1
2
3
4
5
6
7
8
9

# 状态

除了默认的正常状态，还可以设置激活、禁用以及加载中等状态。

收起 
<cube-button active>激活态</cube-button>
<cube-button disabled>置灰态</cube-button>
1
2
收起 
<template>
  <cube-button
    outline
    loading="{{ loading }}"
    bind:click="clickBtn"
  >加载按钮</cube-button>
</template>

<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  data: {
    loading: false
  },
  methods: {
    clickBtn(index) {
      if (this.loading) {
        return
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 5000)
    }
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 图标、辅助文案

可以设置 Icon 的 class，具体可以查看Icon demo。

可以设置 Tip 属性添加辅助文案。

  • With Icon 按钮
收起 
<cube-button primary icon="like">图标按钮</cube-button>
1
  • With Tip 按钮
收起 
<cube-button
  class="mt10"
  icon="like"
  tip="辅助文案"
  primary
  outline
>主要文案</cube-button>
1
2
3
4
5
6
7

# 功能

可以通过设置 openType、formType 等属性，使用小程序的功能并绑定回调。详情参阅微信 Button 文档 (opens new window)以及支付宝 Button 文档 (opens new window)。使用方式如：

  • 分享（微信、支付宝）
收起 
<cube-button
  primary
  open-type="share"
  tip="需在小程序环境下预览"
>分享</cube-button>
1
2
3
4
5
收起 
<cube-button
  outline
  primary
  open-type@wx="getPhoneNumber"
  open-type@ali="getAuthorize"
  scope="phoneNumber"
  tip="需在小程序环境下预览"
  bind:getPhoneNumber="onGetPhoneNumber"
>获取手机号</cube-button>
1
2
3
4
5
6
7
8
9
收起 
<cube-button
  outline
  open-type@wx="getUserInfo"
  open-type@ali="getAuthorize"
  scope="userInfo"
  tip="需在小程序环境下预览"
  bind:getUserInfo="onGetUserInfo"
>获取用户信息</cube-button>
1
2
3
4
5
6
7
8
  • 打开授权设置页面（微信、支付宝）
收起 
<cube-button
  open-type="openSetting"
  tip="需在微信小程序环境预览"
  bind:openSetting="onOpenSetting"
>打开授权设置页面</cube-button>
1
2
3
4
5
  • 打开客服会话（微信）
收起 
<cube-button
  open-type="contact"
  show-message-card="{{ true }}"
  send-message-img="https://dpubstatic.udache.com/static/dpubimg/e7207fae-28de-4b5f-b082-329ff0b01ce0.png"
  send-message-title="点击返回mpx-cube-ui组件库"
  send-message-path="/pages/button/index"
  tip="需在微信小程序环境预览"
>客服会话</cube-button>
1
2
3
4
5
6
7
8
  • 获取用户头像（微信）
收起 
<cube-button
  open-type="chooseAvatar"
  tip="需在微信小程序环境预览"
  bind:chooseAvatar="onChooseAvatar"
>获取头像</cube-button>
1
2
3
4
5
  • 打开 APP（微信）
收起 
<cube-button
  open-type="launchApp"
  app-parameter="xxx"
  tip="需在微信小程序环境预览"
  bind:launchApp="onLaunchApp"
>打开 APP</cube-button>
1
2
3
4
5
6
  • 关注生活号（支付宝）
收起 
<cube-button
  public-id="xxxxxx"
  open-type="lifestyle"
  tip="需在支付宝小程序环境预览"
  bind:followLifestyle="onFollowLifestyle"
>关注生活号</cube-button>
1
2
3
4
5
6

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
active 激活状态 Boolean true/false false
disabled 禁用状态 Boolean true/false false
loading 加载状态 Boolean true/false false
primary 主要的 Boolean true/false false
outline 外边框 Boolean true/false false
light 轻按钮 Boolean true/false false
inline 是否内联 Boolean true/false false
icon 图标 Icon，参阅内置 Icon (opens new window) String - -
iconSize 图标尺寸大小 Number - -
tip 辅助文案 String - -
bolder 文本粗体 Boolean - false
openType 微信相关的属性，具体参阅微信Button文档 (opens new window)和支付宝Button文档 (opens new window) String - -
appParameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 String - -
lang 小程序语言 String - zh_CN
sessionFrom 会话来源，open-type="contact"时有效 String - -
sendMessageTitle 当前标题 String - -
sendMessagePath 当前分享路径 String - -
sendMessageImg 截图 String - -
showMessageCard 微信小程序客服会话卡片 Boolean - false
formType 用于 form 组件 String - -
scope 支付宝小程序中当 open-type 为 getAuthorize 时有效 String phoneNumber/userInfo -
publicId 支付宝生活号 id，必须是当前小程序同主体且已关联的生活号，open-type="lifestyle" 时有效 String - -
styleConfig 通过 wx:style透传样式 Object styleConfig.btn 用于透传给组件最外层 / styleConfig.content 用于透传给组件内容区域 {}

# Events

事件名 说明 参数
click 点击按钮，且在按钮状态不为disabled状态时触发 TouchEvent
getUserInfo 获取用户信息后触发 CustomEvent
getPhoneNumber 获取用户手机号后触发 CustomEvent
error 报错后触发 -
contact 打开客服会话后触发 CustomEvent
openSetting 打开授权设置页后触发 CustomEvent
launchApp 打开 APP 成功后触发 CustomEvent
chooseAvatar 微信小程序获取用户头像后触发 CustomEvent
followLifestyle 支付宝小程序中当 open-type 为 lifestyle 时有效。当点击按钮时触发。 CustomEvent

# Slots

插槽名 说明
— (默认插槽) -

# Methods

组件实例方法 说明 参数 返回值
onClick 点击 - -
onGetUserInfo 获取用户信息 - -
onGetPhoneNumber 获取用户手机号 - -
onError 失败回调 - -
onContact 微信小程序打开客服会话 - -
onOpenSetting 微信小程序中在打开授权设置页后回调，open-type="openSetting" 时有效 - -
onLaunchApp 微信小程序打开 APP 成功的回调，open-type=launchApp时有效(参见微信小程序打开 APP (opens new window)) - -
onChooseAvatar 微信小程序获取用户头像回调，open-type=chooseAvatar时有效 - -
onFollowLifestyle 支付宝小程序中当 open-type 为 lifestyle 时有效。当点击按钮时触发。 - -

# CSS Variable

变量名 默认值 含义
$btn-outline-secondary-color
#666
 次要outline按钮文字颜色
$btn-outline-secondary-bgc_active
rgba(0, 0, 0, 0.08)
 次要outline按钮激活时背景颜色
$btn-loading-dot-active-color loading按钮激活时圆点颜色
$btn-loading-dot-secondary-color
rgba(#ccc, .4)
 loading按钮圆点次要颜色
$btn-loading-dot-normal-color
#ccc
 loading按钮圆点常规颜色
$btn-color 按钮文字颜色
$btn-bgc 按钮背景颜色
$btn-font-size 按钮字体大小
$btn-bgc_active 按钮激活时背景颜色
$btn-border-color
transparent
 按钮边框颜色
$btn-border-radius
7px
 按钮圆角大小
$btn-block-line-height
1.389
 按钮行高
$btn-block-padding
15px 14px
 按钮内边距
$btn-opacity_active
.6
 按钮激活时背景透明度
$btn-bxsh
none
 按钮阴影
$btn-primary-color 主要按钮文字颜色
$btn-primary-bgc 主要按钮背景颜色
$btn-primary-bgc_active 主要按钮激活时背景颜色
$btn-primary-color_active 主要按钮激活时文字颜色
$btn-primary-font-weight
normal
 主要按钮字重
$btn-primary-bxsh
none
 主要按钮阴影
$btn-light-color light按钮文字颜色
$btn-light-bgc light按钮背景颜色
$btn-light-border-color light按钮边框颜色
$btn-light-bgc_active light按钮激活时背景颜色
$btn-light-font-weight
normal
 light按钮字重
$btn-light-bxsh
none
 light按钮阴影
$btn-outline-color outline按钮文字颜色
$btn-outline-bgc
transparent
 outline按钮背景颜色
$btn-outline-border-color outline按钮边框颜色
$btn-outline-bgc_active outline按钮激活时背景颜色
$btn-outline-border-color_active outline按钮激活时边框颜色
$btn-outline-font-weight
normal
 outline按钮字重
$btn-outline-bxsh
none
 outline按钮阴影
$btn-outline-primary-color outline主按钮文字颜色
$btn-outline-primary-bgc
transparent
 outline主按钮背景颜色
$btn-outline-primary-border-color outline主按钮边框颜色
$btn-outline-primary-bgc_active
transparent
 outline主按钮激活时背景颜色
$btn-outline-primary-bxsh
none
 outline主按钮阴影
$btn-disabled-color 按钮禁用时文字颜色
$btn-disabled-bgc 按钮禁用时背景颜色
$btn-disabled-border-color 按钮禁用时边框颜色
$btn-disabled-font-weight
normal
 按钮禁用时字重
$btn-icon-margin-right
4px
 按钮图标右边距
$btn-icon-font-size
100%
 按钮图标字体大小
$btn-icon-inline-margin-right
2px
 内联按钮右边距
$btn-inline-line-height
1
 内联按钮行高
$btn-inline-padding
9px 10px
 内联按钮内边距
$btn-inline-font-size 内联按钮字体大小
$btn-with-tip-padding-top
10px
 带tip按钮padding-top
$btn-with-tip-padding-bottom
10px
 带tip按钮padding-bottom
$btn-with-tip-line-height
1
 带tip按钮行高
$btn-with-tip-font-size 带tip按钮字体大小
$btn-tip-margin-top
6px
 带tip按钮上边距
$btn-tip-font-size
11px
 带tip按钮字体大小
$btn-tip-line-height
1.09
 带tip按钮文字高度
$btn-loading-z-index
2
 loading按钮层叠高度
$btn-loading-dot-bgc loading按钮圆点背景颜色
$btn-loading-dot-size
8px
 loading按钮圆点尺寸
$btn-loading-dot-spacing-size
8px
 loading按钮圆点间隙
$btn-loading-dot-scale
1.3
 loading按钮圆点缩放比例
$btn-loading-duration
2s
 loading时长

← ButtonGroup 按钮组 →