jdc-popup

vue 版本：vue2.1.8+

封装的弹窗组件，目前实现功能：

• 解决滑动穿透（背景滚动）问题
• 新弹窗永远在旧弹窗之上
• 出现/消失过渡动画

demo 体验地址

https://winniecjy.github.io/jdc-popup/demo/

安装

npm install jdc-popup -S

快速使用

import Popup from 'jdc-popup'

<!-- 对于内部需要滚动的元素，需要添加类名jdc-popup-scroll -->
<Popup :show="showPopup" tween="bottom">
  <div class="popup jdc-popup-scroll">
    <p v-for="index of 100">弹窗内容{{index}}</p>
  </div>
</Popup>

参数说明

参数	描述	可选值	默认值
show	是否显示弹窗	true | false	false
lockScroll	禁止背景滚动	true | false	true
maskColor	蒙层颜色	string	rgba(0,0,0,.3)
tween	弹窗过渡动画	fade：淡入淡出 flop：翻牌 scale：缩放 bottom：从下方出现 top：从上方出现 left：从左侧出现 right：从右侧出现	无过渡

兼容性

• PC
• Android 4.4+
• iOS 8+

版本信息

• 1.0.0
  • 解决滑动穿透（背景滚动）问题
  • 新弹窗永远在旧弹窗之上
  • 出现/消失过渡动画

FIXING ...

FIXING ...

• ANDROID 下边界滚动
• 多弹层是只有顶部的元素是可滚动的，避免穿透到下层
• ios8 下弹层无法滚动

有任何问题欢迎 issue~