mpx-cube-ui

# Cube-Popup 弹出层

# 介绍

基础弹层组件，提供了功能：弹层类型、是否有背景层、显示内容以及是否居中等特性。类似于 Dialog、Modal、Toast 等弹层组件都是基于 Popup 进行的封装。

对于所有弹层组件来说都提供了基础的 props 属性及实例方法调用。例如 visible 属性控制是否展示和隐藏、maskClosable 遮罩是否可点击，组件实例的 show、hide 方法来展示和隐藏等，具体见每个弹层组件的文档。

# 示例

# 基础用法

通过组件暴露的 show 方法来控制组件的展示。当然也可以通过 visible 属性来控制组件的显示和隐藏。

收起 
<template>
  <view>
    <cube-button bindclick="show">content-popup</cube-button>
    <cube-popup
      wx:ref="popup"
      maskClosable="{{ true }}"
      content="<i style='color:#fc9153'>Hello World</i>"
      class="cube-extend-popup"
      styleConfig="{{ styleConfig }}"
    >
    </cube-popup>
  </view>
</template>

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

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  data: {
    pos: '',
    trans: '',
    styleConfig: {
      mask: {
        backgroundColor: 'red',
        visibleOpacity: 0.6
      }
    }
  },
  methods: {
    show() {
      this.$refs.popup.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
32
33
34
35
36
37
38

# 自定义位置

通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

收起 
<template>
  <view>
    <cube-button bindclick="show">top/right/bottom-top-popup</cube-button>
    <cube-popup
      wx:ref="popup"
      position="{{ pos }}"
      maskClosable="{{ true }}"
      maskFadeTransition="{{ true }}"
      class="cube-extend-popup">
      <view class="popup-slot">This is position popup</view>
    </cube-popup>
  </view>
</template>

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

let index = 0
const pos = ['top', 'right', 'bottom', 'left', 'center']

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  data: {
    pos: ''
  },
  methods: {
    show() {
      this.pos = pos[index++]
      this.$refs.popup.show()
      if (index === 5) {
        index = 0
      }
    }
  }
})
</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

# 自定义过渡效果

通过 transition 属性可以设置弹窗的动画效果，目前组件提供了 move-up、move-right、move-left、move-down、fade 等效果，具体见示例 demo。

收起 
<template>
  <view>
    <cube-button bindclick="show">top/right/bottom-top-transition</cube-button>
    <cube-popup
      wx:ref="popup"
      position="{{ pos }}"
      maskClosable="{{ true }}"
      maskFadeTransition="{{ true }}"
      transition="{{ trans }}"
      class="cube-extend-popup">
      <view class="popup-slot">This is transition popup</view>
    </cube-popup>
  </view>
</template>

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

let index = 0
const posAndTrans = [
  {
    pos: 'top',
    trans: 'move-down'
  },
  {
    pos: 'right',
    trans: 'move-left'
  },
  {
    pos: 'bottom',
    trans: 'move-up'
  },
  {
    pos: 'left',
    trans: 'move-right'
  },
  {
    pos: 'center',
    trans: 'fade'
  }
]

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  data: {
    pos: '',
    trans: ''
  },
  methods: {
    show() {
      const { pos, trans } = posAndTrans[index++]
      this.pos = pos
      this.trans = trans
      this.$refs.popup.show()
      if (index === 5) {
        index = 0
      }
    }
  }
})
</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
52
53
54
55
56
57
58
59
60
61
62
63

# Props

参数 说明 类型 可选值 默认值
zIndex 弹出层 z-index Number - 100
maskClosable 遮罩是否可点击 Boolean - false
maskFadeTransition 遮罩是否渐显 Boolean - false
visible 遮盖层初始状态是否可见 Boolean - false
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
type 拓展 class 属性，cube-${type}，可用于样式覆盖和定制 String - -
mask 是否显示遮罩 Boolean - true
content 文本内容，微信&web 支持 html string 的文本格式，支付宝目前不支持，所以需要自己转，具体见：支付宝 rich-text文档 (opens new window) String - -
center 是否居中显示 Boolean - true
position 内容位置 String - -
transition 过渡动画 String - -
styleConfig 透传样式，可用于样式覆盖。其中 mask.visibleOpacity 用于设置遮罩层显示时透明度 Object - {}
removeCatchTouch Boolean - false

# Events

事件名 说明 参数
toggle 显示/隐藏时触发 event.detail = { value }， 表当前状态是显示还是隐藏
maskClick 点击遮罩 -

# Slots

插槽名 说明
mask 遮罩插槽
— (默认插槽) 默认插槽
mask 遮罩插槽
— (默认插槽) 默认插槽

# Methods

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

# CSS Variable

变量名 默认值 含义
$popup-z-index
100
 -
$popup-mask-opacity
0.4
 遮罩透明度
$popup-default-animation-time
0.3s
 默认动画时间
$popup-default-animation-fn
ease
 默认动画函数
$popup-mask-transition
opacity .2s ease
 遮罩过渡
$popup-mask-hide-transition
opacity .2s ease
 遮罩隐藏过渡
$popup-default-hide-animation-fn
ease
 默认隐藏动画函数

← Toast 轻提示 →