jdc-popup

vue 版本：vue2.1.8+

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

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

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
  • [x] 解决滑动穿透（背景滚动）问题
  • [x] 新弹窗永远在旧弹窗之上
  • [x] 出现/消失过渡动画

FIXING ...

FIXING ...

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

有任何问题欢迎 issue~