mpx-cube-ui

# Cube-Dialog 弹出框

# 介绍

Dialog 模态框组件，提供了多种样式及交互形式，常用于消息的提示及确认。

已适配RN

# 示例

# 基础用法

通过 type 属性来选择使用 alert 提示框类型，还是 confirm 确认框类型，通过调用组件暴露的 show、hide 方法来控制组件的显示与隐藏。

收起 
<template>
  <view class="dialog-alert-passenger-demo">
    <cube-button  bind:click="onClickDialog">Dialog - alert</cube-button>
    <cube-dialog

      wx:ref="dialogAlert"
      title="我是标题"
      content="正文行文符合话术规范，表意清晰可多行展示，单行居中对齐，多行居左"
      confirmBtn="引导文案"
    ></cube-dialog>
  </view>
</template>

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

createComponent({
  methods: {
    onClickDialog () {
      const dialogRef = this.$refs.dialogAlert
      dialogRef.show()
    }
  }
})
</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
收起 
<template>
  <view class="dialog-confirm-passenger-demo">
    <cube-button  bind:click="onClickDialog">Dialog - confirm</cube-button>
    <cube-dialog

      wx:ref="dialogConfirm"
      class="custom-dialog-confirm"
      type="confirm"
      title="我是标题要精简"
      content="正文行文符合话术规范，表意清晰可多行展示，单行居中对齐，多行居左"
      confirm-btn="引导文案"
      cancel-btn="按钮文案"
    ></cube-dialog>
  </view>
</template>

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

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  methods: {
    onClickDialog () {
      const dialogRef = this.$refs.dialogConfirm
      dialogRef.show()
    }
  }
})
</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

# 自定义 head icon

通过设置 headIcon 的 url地址，将会在模态框头部显示该图标。

收起 
<template>
  <view class="dialog-icon-passenger-demo">
    <cube-button  bind:click="onClickDialog">Dialog - head-icon</cube-button>
    <cube-dialog

      wx:ref="dialogWithHeadIcon"
      type="alert"
      headIcon="https://dpubstatic.udache.com/static/dpubimg/f6abf7d7-e7a9-4c2b-8fc5-78085691220b.png"
      title="我是标题"
      content="我是内容"
      confirmBtn="我知道了"
    ></cube-dialog>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 自定义垂直排列按钮

收起 
<template>
  <view class="dialog-btn-vertical-passenger-demo">
    <cube-button  bind:click="onClickDialog">Dialog - vertical btns</cube-button>
    <cube-dialog  wx:ref="dialogWithVerticalBtns">
      <view slot="title" class="dialog-vertical-btns-title">测试标题</view>
      <view slot="content" class="dialog-btn-content">测试content</view>
      <view slot="btns" class="dialog-btn-slot-vertical">
        <view class="lead-btn" bind:tap="onCloseDialog">引导文案</view>
        <view class="lead-btn" bind:tap="onCloseDialog">按钮文案</view>
        <view class="lead-btn" bind:tap="onCloseDialog">按钮文案</view>
      </view>
    </cube-dialog>
  </view>
</template>

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

createComponent({
  methods: {
    onClickDialog () {
      const dialogRef = this.$refs.dialogWithVerticalBtns
      dialogRef.show()
    },
    onCloseDialog () {
      const dialogRef = this.$refs.dialogWithVerticalBtns
      dialogRef.hide()
    }
  }
})
</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

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
visible 遮盖层初始状态是否可见 Boolean - false
zIndex 弹出层 z-index Number - 100
maskClosable 遮罩是否可点击 Boolean - false
maskFadeTransition 遮罩是否渐显 Boolean - false
type 类型 String alert/confirm alert
icon 图标类型（自动添加cubeic-前缀） String 图标 Icon，更多选择参见内置 Icon (opens new window) -
title 标题 String - -
content 正文内容 String - -
headIcon 顶部居中的小圆图标 String - -
showClose 是否显示关闭 Icon 按钮 Boolean - false
confirmBtn 确认按钮参数配置 Object DialogBtn DialogBtn
cancelBtn 取消按钮参数配置 Object DialogBtn DialogBtn
styleConfig 通过 wx:style透传样式, 里面的每项分别修改对应位置的样式 Object styleConfig = { headIcon: '' } {}

# TsType

Name Type
DialogBtn 
{
  active?: boolean;
  disabled?: boolean;
  text: string;
}

# Events

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

# Slots

插槽名 说明
title 标题插槽
content 内容插槽
btns 按钮插槽

# Methods

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

# CSS Variable

变量名 默认值 含义
$dialog-container-width
270px
 容器宽度
$dialog-container-border-top-left-radius
2px
 -
$dialog-container-border-top-right-radius
2px
 -
$dialog-container-border-bottom-left-radius
2px
 -
$dialog-container-border-bottom-right-radius
2px
 -
$dialog-container-border-radius 容器圆角
$dialog-bgc 背景颜色
$dialog-btn-secondary-active-bgc
rgba(0, 0, 0, .08)
 -
$dialog-btn-secondary-highlight-active-bgc
rgba(252, 145, 83, .04)
 -
$dialog-icon-color icon-颜色
$dialog-icon-bgc icon-背景颜色
$dialog-icon-container-margin-top
20px
 icon-上边距
$dialog-icon-container-margin-bottom
16px
 icon-底部边距
$dialog-icon-container-width
30px
 icon-宽度
$dialog-icon-container-height
30px
 icon-高度
$dialog-icon-container-padding-top
10px
 -
$dialog-icon-container-padding-right
10px
 -
$dialog-icon-container-padding-bottom
10px
 -
$dialog-icon-container-padding-left
10px
 -
$dialog-icon-container-padding icon-内边距
$dialog-icon-container-border-radius
50%
 icon-圆角
$dialog-icon-line-height
1
 icon-行高
$dialog-icon-next-title-margin-top
0px
 icon距离标题的上边距
$dialog-title-default-margin-top
25px
 -
$dialog-title-default-margin-right
16px
 -
$dialog-title-default-margin-bottom
0
 -
$dialog-title-default-margin-left
16px
 -
$dialog-title-default-margin 标题边距
$dialog-title-color 标题颜色
$dialog-title-margin-top
24px
 标题上边距
$dialog-title-font-size 标题字号
$dialog-title-def-color 标题默认颜色
$dialog-title-line-height
1
 标题行高
$dialog-icon-next-content-margin-top
-4px
 内容距离icon的上边距
$dialog-title-next-content-margin-top
12px
 内容距离标题的上边距
$dialog-content-container-margin
16px 0
 内容边框的上下边距
$dialog-content-container-line-height
22px
 内容边框的行高
$dialog-content-def-padding-top
0
 -
$dialog-content-def-padding-right
25px
 -
$dialog-content-def-padding-bottom
0
 -
$dialog-content-def-padding-left
25px
 -
$dialog-content-def-padding 内容边框内边距
$dialog-content-font-size 内容文本字号
$dialog-content-color 内容文本颜色
$dialog-content-margin-top
10px
 -
$dialog-content-margin-right
0
 -
$dialog-content-margin-bottom
20px
 -
$dialog-content-margin-left
0
 -
$dialog-content-margin 内容文本边距
$dialog-content-def-text-align
justify
 内容文本对齐方式
$dialog-button-padding-top
17px
 -
$dialog-button-padding-right
10px
 -
$dialog-button-padding-bottom
17px
 -
$dialog-button-padding-left
10px
 -
$dialog-button-padding 按钮内边距
$dialog-btn-color 按钮颜色
$dialog-btn-bgc 按钮背景色
$dialog-btn-active-bgc 按钮激活态背景色
$dialog-btn-highlight-color 按钮高亮颜色
$dialog-btn-highlight-active-bgc 按钮高亮激活态背景色
$dialog-btn-disabled-color 按钮禁用态颜色
$dialog-btn-disabled-active-bgc
transparent
 按钮禁用态背景色
$dialog-btns-split-color 按钮分割线颜色
$dialog-btn-line-height
21px
 按钮行高
$dialog-close-width
32px
 关闭按钮宽度
$dialog-close-height
32px
 关闭按钮高度
$dialog-close-color 关闭按钮颜色
$dialog-head-icon-width
85px
 head-icon 宽度
$dialog-head-icon-height head-icon 高度
$dialog-head-icon-border-top-left-radius
50%
 -
$dialog-head-icon-border-top-right-radius
50%
 -
$dialog-head-icon-border-bottom-left-radius
50%
 -
$dialog-head-icon-border-bottom-right-radius
50%
 -
$dialog-head-icon-border-radius head-icon 圆角
$dialog-head-icon-margin-top
-42.5px
 head-icon 上边距
$dialog-zoom-animation-name
dialog-zoom
 -
$dialog-zoom-animation-duration
.3s
 -
$dialog-zoom-animation-fn
ease-in-out
 -
$dialog-zoom-transform-from
scale(0)
 -
$dialog-zoom-opacity-from
1
 -
$dialog-zoom-transform-mid
scale(1.1)
 -
$dialog-zoom-opacity-mid
1
 -
$dialog-zoom-transform-to
scale(1)
 -
$dialog-zoom-opacity-to
1
 -
$dialog-zoom-hide-opacity-from
1
 -
$dialog-zoom-hide-opacity-to
0
 -
$dialog-hide-animation-name
dialog-hide-animation
 -
$dialog-hide-animation-duration
.3s
 -
$dialog-hide-animation-fn
cubic-bezier(0, 0, 0.07, 1.00)
 -
$dialog-hide-animation-mode
forwards
 -

← Modal 半浮层弹窗 →