Popup 弹出层

Popup 弹出层

#介绍

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

#引入

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

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

Vue.use(Popup);

#代码演示

#基础用法

通过 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>

#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	自定义弹出层显示内容