Cube-Modal 半浮层弹窗

# 介绍

在弹出层中展示的模态对话框，引导用户进行相关操作。

# 示例

# 基础用法

通过调用组件的 show、hide 方法来控制组件的显示与隐藏。

收起

<template>
  <cube-modal
    wx:ref="modal"
    type="confirm"
    title="我是标题~"
    content="我是正文正文"
    confirm-btn="一个按钮"
    mask-closable="{{ true }}"
    bind:maskClick="onMaskClick"
    bind:confirm="onConfirm"
    bind:cancel="onCancel"
  />
  <cube-button  bind:click="onTap">modal-one-button</cube-button>
</template>

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

  createComponent({
    methods: {
      onTap() {
        this.$refs.modal.show()
      },
      onConfirm() {
        console.log('click the onConfirm btn')
      },
      onCancel() {
        console.log('click the onCancel btn')
      },
      onMaskClick() {
        console.log('click mask')
      }
    }
  })
</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

# 按钮排列方式

设置属性 direction 来控制底部按钮排列布局方式，目前提供了水平/垂直两种不同的排列。

收起

<template>
  <cube-modal
    wx:ref="modal"
    title="我是标题~"
    content="我是正文我是正文我是正文我是正文我是正文我是正文"
    direction="horizontal"
    confirm-btn="确认按钮"
    cancel-btn="取消按钮"
    mask-closable="{{ true }}"
    bind:confirm="onConfirm"
    bind:cancel="onCancel"
  />
  <cube-button  bind:click="onTap">modal-水平两个按钮</cube-button>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Slot的使用

Modal 组件按结构进行拆分，分别提供了包括顶部、标题、内容、尾部、Icon 等插槽用以自定义组件的样式内容。

收起

<template>
  <view class="modal-header-slot-demo">
    <cube-modal
      wx:ref="modal"
      content="我是正文正文"
      direction="horizontal"
      confirm-btn="确认继续接单"
      cancel-btn="取消"
      mask-closable="{{ true }}"
      bind:confirm="onConfirm"
      bind:cancel="onCancel"
    >
      <view slot="header">
        <image class="slot-header" src="https://ut-static.udache.com/webx/mpx-cube-ui/tKQimxwHlkY8nSSqpmGE9_111.jpg"></image>
      </view>
    </cube-modal>
    <cube-button  bind:click="onTap">modal-header-slot</cube-button>
  </view>
</template>

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

  createComponent({
    methods: {
      onTap() {
        this.$refs.modal.show()
      },
      onConfirm() {
        console.log('click the confirm btn')
      },
      onCancel() {
        console.log('click the cancel btn')
      }
    }
  })
</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

# 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
type	按钮类型	`String`	optional/confirm	optional
direction	按钮方向	`String`	vertical/horizontal	vertical
confirmBtn	确定按钮	`Object`	vertical/horizontal	BtnOptions
cancelBtn	取消按钮	`Object`	-	BtnOptions
content	内容文本	`String`	-	-
layout	icon 与 title、content的排列方向	`String`	vertical/horizontal	ModalDirection.VERTICAL
noBuiltInBtns	是否不使用内置的底部按钮	`Boolean`	-	false
styleConfig	通过 wx:style透传样式, 里面的每项分别修改对应位置的样式	`Object`	styleConfig = { header: '', body: '', footer: '', section: '}	{}

# TsType

Name Type

BtnOptions

Name	Type
BtnOptions	`{ disabled?: boolean; text: string; }&Partial<{ appParameter: string; formType: string; lang: string; openType: string; scope: string; sendMessageImg: string; sendMessagePath: string; sendMessageTitle: string; sessionFrom: string; showMessageCard: boolean; }>`

{
  disabled?: boolean;
  text: string;
}&Partial<{
  appParameter: string;
  formType: string;
  lang: string;
  openType: string;
  scope: string;
  sendMessageImg: string;
  sendMessagePath: string;
  sendMessageTitle: string;
  sessionFrom: string;
  showMessageCard: boolean;
}>

# Events

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

# Slots

插槽名	说明
closeIcon	-
header	顶部位置插槽
icon	图标位置插槽
title	标题位置插槽
content	内容位置插槽
footer	尾部位置插槽

# Methods

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

# CSS Variable

变量名	默认值	含义
$modal-border-radius	7px 7px 0 0	边框圆角
$modal-bgc	$var(color-white)	背景色
$modal-cancel-margin	35px	取消按钮外边距
$modal-cancel-height	55px	取消按钮高度
$modal-cancel-line-height	55px	取消按钮行高
$modal-cancel-padding	0 25px 0 25px	取消按钮内边距
$modal-cancel-font-size	$var(font-size-md)	取消按钮字号
$modal-cancel-font-weight	500	取消按钮字重
$modal-cancel-color	$var(color-black)	取消按钮颜色
$modal-cancel-border-bottom-color	$var(border-color-normal)	底部边框颜色
$modal-body-padding-top	0	上内边距
$modal-body-padding-right	25px	右内边距
$modal-body-padding-bottom	0	底部边距
$modal-body-padding-left	25px	左内边距
$modal-header-default-height	35px	header区域高度
$modal-title-font-size	$var(font-size-3xl)	标题字号
$modal-title-line-height	1.33	标题行高
$modal-title-color	$var(color-black)	标题颜色
$modal-title-margin-bottom	12px	标题下边距
$modal-title-default-font-weight	500	标题字重
$modal-close-icon-top	5px	关闭icon距离顶部距离
$modal-close-icon-right	5px	关闭icon距离右部距离
$modal-close-icon-padding	5px	关闭icon内边距
$modal-close-icon-font-size	$var(font-size-xl)	关闭icon字号
$modal-close-icon-color	$var(color-black)	关闭icon颜色
$modal-close-icon-font-weight	700	关闭icon字重
$modal-content-line-height	1.2	内容区行高
$modal-content-font-size	$var(font-size-xl)	内容区字号
$modal-content-color	$var(text-color)	内容区颜色
$modal-button-group-margin-top	35px	按钮顶部外边距
$modal-button-font-size	$var(font-size-lg)	按钮字号
$modal-button-line-height	24px	按钮行高
$modal-button-padding-top	13px	按钮顶部内边距
$modal-button-padding-bottom	13px	按钮底部内边距
$modal-button-height	$modal-button-line-height + $modal-button-padding-top + $modal-button-padding-bottom	按钮高度
$modal-footer-padding	0 25px 20px 25px	footer区域内边距

← Dialog 弹出框 Tip 提示 →

# Cube-Modal 半浮层弹窗