Popup 弹出层 | DolphinHybrid

点我扫二维码，查看demo

# 介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

# 引入

通过一下方式来按需注册组件

import Vue from 'vue';
import { Popup } from '@dolphin-iot/ui'

Vue.use(Popup);

1
2
3
4

# 代码演示

# 基础用法

通过 show 属性控制弹出层是否显示；position属性控制弹出层的弹出方向，方向值为： top bottom right left center;

<template>
  <div class="demo-list">
    <div class="panel">
      <h4>使用方法</h4>
      <div>
        <mx-cell title="中间弹出" type="link" @click="center = !center" />
        <mx-cell title="左边弹出" type="link" @click="left = !left" />
        <mx-cell title="右边弹出" type="link" @click="right = !right" />
        <mx-cell title="上边弹出" type="link" @click="top = !top" />
        <mx-cell title="下边弹出" type="link" @click="bottom = !bottom" />
      </div>
      <div class="demo-panel">
        <mx-popup round :show="center" @close="center = false" position="center">
          <div class="mask-center-panel">
            <h4>使用美居App</h4>
            <div class="text-center">
              <div>1. 新增小组件，提升用户体验</div>
              <div>2. 设备卡片宫格展示，优化排版</div>
              <div>3. 新增商城礼品卡激活，尽情买买买</div>
            </div>
            <div class="text-footer" @click="center = false">升级</div>
          </div>
        </mx-popup>
        <mx-popup :show="left" position="left" @close="left = false">
          <div class="mask-panel ver">
            <div class="text center">
              <h4>使用美居APP</h4>
              <div>享受更好智能家居体验</div>
            </div>
            <mx-button size="super" @click="left = !left">下载美居</mx-button>
          </div>
        </mx-popup>
        <mx-popup :show="right" position="right" @close="right = false">
          <div class="mask-panel ver">
            <div class="text center">
              <h4>使用美居APP</h4>
              <div>享受更好智能家居体验</div>
            </div>
            <mx-button size="super" @click="right = !right">下载美居</mx-button>
          </div>
        </mx-popup>
        <mx-popup round :show="top" position="top" @close="top = false">
          <div class="mask-panel">
            <div class="text">
              <div>1. 新增小组件，提升用户体验</div>
              <div>2. 设备卡片宫格展示，优化排版</div>
              <div>3. 新增商城礼品卡激活，尽情买买买</div>
            </div>
            <mx-button size="super" @click="top = !top">立即升级</mx-button>
          </div>
        </mx-popup>
        <mx-popup round :show="bottom" position="bottom" @close="bottom = false">
          <div class="mask-panel">
            <div class="text">
              <div>1. 新增小组件，提升用户体验</div>
              <div>2. 设备卡片宫格展示，优化排版</div>
              <div>3. 新增商城礼品卡激活，尽情买买买</div>
            </div>
            <mx-button size="super" @click="bottom = !bottom">立即升级</mx-button>
          </div>
        </mx-popup>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: false,
      left: false,
      right: false,
      top: false,
      bottom: false,
    };
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.demo-list {
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
  h4 {
    padding: 20px 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .demo-panel {
    position: relative;
    .mask-center-panel{
      background-color: white;
      font-size: 13px;
      h4{
        text-align: center;
        padding-bottom: 12px;
        padding-top: 24px;
        margin-top: 0;
        margin-bottom: 0;
      }
      .text-center {
        padding: 12px 16px 24px 16px;
        line-height: 20px;
        max-height: 32vh;
        overflow-y: scroll;
      }
      .text-footer{
        text-align: center;
        padding: 19px 0;
        color:#267AFF;
        background: #F6F6F6;
        box-shadow: 0 0 0 0 #E5E5E8;
        font-size: 16px;
        font-weight: bold;
        width: 273px;
      }
    }
    .mask-panel {
      background-color: white;
      padding-bottom: 30px;
      font-size: 13px;
      color: #666;
      line-height: 24px;
      &.ver {
        height: 100%;
      }
      .text {
        padding: 20px;
        &.center {
          text-align: center;
        }
        h4 {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

# Api

# Props

参数	说明	类型	默认值	是否必须
show	是否显示弹出层	boolean	`false`	`-`
overlay	是否显示遮罩层	boolean	`true`	`-`
round	是否显示为圆角	boolean	`false`	`-`
z-index	弹出层在z轴的序号	number	`1030`	`-`
lock-scroll	是否锁定背景滚动	boolean	`true`	`-`
duration	弹出层以及遮罩层动画时长（秒为单位）	number	`0.36`	`-`
overlay-style	遮罩层自定义样式	object	`-`	`-`
background	自定义弹出框背景样式	string	`-`	`-`
position	弹出框位置，可选值为： `top` `left` `right` `bottom` `center`	string	`bottom`	`-`
close-on-click-overaly	是否在点击遮罩层后关闭	boolean	`true`	`-`
safe-area-inset-bottom	是否开启底部安全区适配	boolean	`false`	`-`

# Events

名称	说明	回调参数
close	关闭时触发	e: boolean

# Slots

名称	说明
default	自定义弹出层显示内容

← Cell 列表项 Icon 图标 →

# Popup 弹出层