mpx-cube-ui

# Cube-Radio-Modal

# 介绍

由 Radio 和 Modal 组件复合组成的组件。

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

# 示例

# 基础用法

渲染一个单选弹窗。

收起 
<template>
  <view class="radio-modal-default-demo">
    <cube-radio-modal
      wx:ref="radioModal"
      title="请选择支付方式"
      subtitle="将按已选择的支付方式优先支付，若不支持该支付方式的⻋型则默认为上次所选支付方式"
      show-close-icon="{{ true }}"
      options="{{ options }}"
      value="{{ checkedValue }}"
      bind:close="onClose"
      bind:confirm="onConfirm"
    />
    <cube-button bind:click="onTap">radio-modal-default</cube-button>
  </view>
</template>

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

  createComponent({
    data: {
      options: [
        {
          value: '1',
          text: '企业支付',
        },
        {
          value: '2',
          text: '亲友代付'
        },
        {
          value: '3',
          text: '个人支付'
        }
      ],
      checkedValue: '2'
    },
    methods: {
      onTap() {
        this.$refs.radioModal.show()
      },
      onConfirm(args) {
        console.log('当前选择的值是', args.detail)
      },
      onClose() {
        console.log('当前已取消选择')
      }
    }
  })
</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

# 自定义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-radio-modal
    wx:ref="radioModal"
    title="关闭按钮配置"
    subtitle='你可以通过设置"cancelText"来显示关闭文案，同时将"cancelBtnAlign"设置为"right"'
    cancelText="关闭"
    cancelBtnAlign="right"
    options="{{ options }}"
    value="{{ checkedValue }}"
  />
  <cube-button bind:click="onTap">radio-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-radio-modal
    wx:ref="radioModal"
    show-close-icon="{{ true }}"
    options="{{ options }}"
    value="{{ checkedValue }}"
  >
    <view class="modal-title" slot="title">标题slot</view>
    <view class="modal-subtitle" slot="subtitle">副标题slot</view>
  </cube-radio-modal>
  <cube-button bind:click="onTap">radio-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 - -
options 选项数据 Array - ExtendOption[]
value 选中值 String -

# TsType

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

# Events

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

# Slots

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

# Methods

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

# CSS Variable

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

← CheckboxModal →