mpx-cube-ui

# Cube-Checkbox-Modal

# 介绍

内置复选框组的半浮层模态框。

# 示例

# 基础用法

渲染一个多选弹窗。

收起 
<template>
  <view class="checkbox-group-modal-default-demo">
    <cube-checkbox-group-modal
      wx:ref="checkboxModal"
      title="我是标题"
      subtitle="这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述"
      show-close-icon="{{ true }}"
      options="{{ options }}"
      values="{{ value }}"
      bind:close="onClose"
      bind:confirm="onConfirm"
    />
    <cube-button bindclick="onTap">checkbox-modal-default</cube-button>
  </view>
</template>

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

  createComponent({
    data: {
      confirmBtn: '确认支付方式',
      options: [
        {
          value: '1',
          text: '企业支付'
        },
        {
          value: '2',
          text: '亲友代付'
        },
        {
          value: '3',
          text: '个人支付'
        }
      ],
      value: ['2', '3']
    },
    methods: {
      onTap() {
        this.$refs.checkboxModal.show()
      },
      onConfirm(args) {
        console.log('当前选择的值是', args.detail)
      },
      onClose(args) {
        console.log('当前取消前选择的值是', args.detail)
      }
    }
  })
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 自定义option

每一个多选项都可以进行单独配置，具体的配置内容见下文ExtendOption。我们可以通过position改变单选框的位置，通过desc配置每一项的描述。如果想将某一项单独设置为禁用状态，可以将disabled设置为true。

<script>
createComponent({
  data: {
    options: [
      {
        value: '1',
        position: 'right',
        disabled: true,
        text: '企业支付',
        desc: ''
      },
      {
        value: '2',
        text: '亲友代付',
        position: 'right',
        desc: '仅支持滴滴快车/优享/舒适型/豪华车型'
      },
      {
        value: '3',
        text: '个人支付',
        position: 'right',
        desc: '仅支持滴滴快车/优享/舒适型/豪华车型仅支持滴滴快车/优享/舒适型/豪华车型'
      }
    ]
  }
})
</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

# 自定义关闭按钮

你可以通过设置cancelText来显示关闭文案，同时将cancelBtnAlign设置为right。

收起 
<view class="radio-modal-cancel-btn-demo">
  <cube-checkbox-group-modal
    wx:ref="checkboxModal"
    title="关闭按钮配置"
    subtitle='你可以通过设置"cancelText"来显示关闭文案，同时将"cancelBtnAlign"设置为"right"'
    cancelText="关闭"
    cancelBtnAlign="right"
    options="{{ options }}"
    values="{{ value }}"
  />
  <cube-button bindclick="onTap">checkbox-modal-cancel-btn</cube-button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

# 自定义插槽

你可以通过title插槽与subtitle插槽，自定义标题与副标题内容。

收起 
<view class="radio-modal-slots-demo">
  <cube-checkbox-group-modal
    wx:ref="checkboxModal"
    show-close-icon="{{ true }}"
    options="{{ options }}"
    values="{{ value }}"
  >
    <view class="modal-title" slot="title">标题slot</view>
    <view class="modal-subtitle" slot="subtitle">副标题slot</view>
  </cube-checkbox-group-modal>
  <cube-button bindclick="onTap">checkbox-modal-slots</cube-button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
收起 
<style lang="stylus">
.modal-title
  font-size 20px
  font-weight bold
  margin-bottom 10px
.modal-subtitle
  margin-bottom 10px
</style>
1
2
3
4
5
6
7
8

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
visible 遮盖层初始状态是否可见 Boolean - false
maskClosable 是否点击蒙层隐藏 Boolean - false
title 标题 String - -
cancelText 顶部取消按钮文案配置 String - -
cancelBtnAlign 顶部取消按钮对齐方式 String left/right left
showCloseIcon 是否展示关闭按钮X Boolean - false
hideOnConfirm 触发 confirm 事件时是否需要主动关闭弹窗 Boolean - true
hideOnCancel 触发 cancel 事件时是否需要主动关闭弹窗 Boolean - true
hideOnClose 触发 close 事件时是否需要主动关闭弹窗 Boolean - true
subtitle 描述 String - -
confirmBtn 底部按钮文案 String - 确定
options 选项数据 Array - ExtendOption[]
values 选中值 Array Value[]

# TsType

Name Type
ExtendOption 
{
  desc?: string;
  text: string;
}&{
  desc?: string;
  disabled?: boolean;
  position?: left|right;
  text?: string;
  value: string|number;
}
Value 
string|number

# Events

事件名 说明 参数
toggle 显示/隐藏时触发 event.detail = { value }， 表当前状态是显示还是隐藏
maskClick 点击遮盖层触发事件 -
ready 组件 ready 生命周期事件 -
confirm 点击确认时触发 确认选项值
close 点击顶部关闭icon或遮盖层触发事件 -
cancel 点击顶部取消按钮触发事件 -

# Slots

插槽名 说明
title 主标题
subtitle 副标题，可自定义描述等

# Methods

组件实例方法 说明 参数 返回值
show 显示 - -
hide 隐藏 - -

# CSS Variable

变量名 默认值 含义
$checkbox-modal-body-padding-right
0 - $modal-body-padding-right
 内右边距
$checkbox-modal-subtitle-margin-bottom
15px
 副标题下边距
$checkbox-modal-subtitle-padding-right
$var(modal-body-padding-right)
 副标题内右边距
$checkbox-modal-subtitle-line-height
1.4
 副标题行高
$checkbox-modal-subtitle-font-size 副标题字体大小
$checkbox-modal-subtitle-color 副标题颜色
$checkbox-modal-content-max-height
212px
 内容区最大高度
$checkbox-modal-item-padding-right
$modal-body-padding-right
 选项内右边距
$checkbox-modal-item-height
70px
 选项高度
$checkbox-modal-content-item-color_disabled 选项禁用态颜色
$checkbox-modal-item-border-color 选项下边框颜色
$checkbox-modal-button-group-margin-top
18px
 按钮组上边距

← PickerModal →