更新记录

1.8.2（2020-09-01）

修复高度异常

1.8.1（2020-09-01）

1. 优化逻辑
2. 解决滚动穿透（终于解决了）
3. 修复文档错误

1.8.0（2020-09-01）

1. 代码大幅度重构
2. 优化中部弹出框的top属性计算公式

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件

   <wyb-popup ref="popup" type="bottom" height="400" width="500" radius="6" :showCloseIcon="true">
       <view class="popup-content">
           我是里面的内容
       </view>
   </wyb-popup>

   import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
   export default {
       components: {
           wybPopup
       }
   }

   this.$refs.popup.show() // 显示
   this.$refs.popup.hide() // 隐藏

3. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

1. Props

   参数名	类型	默认值	用途	可选值
   type	String	bottom	弹出框的位置	bottom | top | left | right | center
   mode	String	size-auto	弹出框调整大小的模式	size-auto：当type = bottom | top时，超出height值时，根据内容自动调整；当type = left | right时，超出width值时，根据内容自动调整；另外，当type = center时，size-auto不适用 size-fixed：弹出框的大小是固定的height值或width值，当type = center时，大小就是width和height
   height	String, Number	400	弹出框的高度（当type = bottom | top | center时生效，单位：rpx）	正整数
   width	String, Number	500	弹出框的高度（当type = left | right | center时生效，单位：rpx）	正整数
   radius	String, Number	0	弹出框边角的弧度数（单位：px）	正整数
   zIndex	String, Number	10076	弹出框的z-index（同css的z-index）	正整数
   maskClickClose	Boolean	true	点击遮罩是否能够关闭弹出框	true | false
   maskAlpha	Number	0.5	遮罩的透明度	0~1
   duration	Number	400	弹出框的动画时间（单位：ms）	正整数
   showCloseIcon	Boolean	false	是否显示弹出框的关闭按钮	true | false
   centerAnim	String	zoom-lessen	当type = center时，弹出框的动画类型	zoom-lessen：从大到小的缩放 slide-up：上升 slide-down：下降 fade：渐显渐隐
   closeIconPos	String	top-right	关闭按钮的位置	top-right：右上角 top-left：左上角 bottom-right：右下角 bottom-left：左下角
   closeIcon	String	-	自定义关闭图标的路径，为空则使用默认图标	-
   closeIconSize	String, Number	20	自定义关闭图标的大小（单位：rpx）	-
   vertOffset	String, Number	22	关闭按钮的垂直偏移量	-
   horiOffset	String, Number	22	关闭按钮的水平偏移量	-
   bgColor	String	'#fff'	弹出框的背景颜色	16进制色值，rgb()，或rgba()
   zoomLessenMulti	Number	1.15	当centerAnim = zoom-lessen时，弹出框的基础放大倍数	正数
   slideMulti	Number	0.2	当centerAnim = slide-*时，弹出框的位移倍数（对于自身宽高的倍数）	正数
   scrollY	Boolean	false	弹出框的内容是否可以垂直滚动	true | false
   scrollX	Boolean	false	弹出框的内容是否可以水平滚动	true | false
   negativeTop	Number	0	弹出框向上偏移的距离	-

2. Event

   事件名	用途	返回值
   @show	弹出框弹出后触发	event={pageScroll: false, overflow: 'hidden'}
   @hide	弹出框收回后触发	event={pageScroll: true, overflow: 'scroll'}

三、关于滚动穿透

1. @show和@hide事件的返回值可以用于动态控制页面或区域的滚动与禁止滚动；
2. 页面限高之后，在@show和@hide事件中动态控制overflow的值即可；或者动态控制scroll-view的scroll-y与scroll-x的值
3. 其他方法我暂时没找到，各位大佬可以给给建议

——————————————以上是旧内容

1. 小程序端已经接近完美地解决了滚动穿透问题
2. 其他端端暂时无法完美解决，但是正常在popup内滚动时没有穿透，只有当滚动到底部时才会穿透。如果像一点穿透都没有，其他端请使用上面的旧方法

——————————————以上全都是旧内容

1. 基本完美解决滚动穿透
2. 经测试APP、H5、小程序均正常

四、关于网络请求

1. 弹窗用于网络请求的loading框时，请求数据后回调中的this.$refs.popup.hide()要加个延时操作（延时别太明显，没啥感觉那种就行），防止数据请求过快导致组件没渲染好就调用了隐藏方法而导致的报错。
2. 或者可以使用我的另外一个插件（Loading加载框）https://ext.dcloud.net.cn/plugin?id=2628