平台兼容性

本次更新内容

更新的组件在示例项目中！！！请下载 示例项目.zip

更新的组件在示例项目中！！！请下载 示例项目.zip

更新的组件在示例项目中！！！请下载 示例项目.zip

页面加载后弹出框闪出闪退问题修复

关于之前的一个问题： 弹出框内有滚动内容，当滚动到底部后会穿透的问题

关于弹出层滚动到底部穿透的问题（下面描述），给大家一个比较简单的解决方案：在弹出框弹出的时候，控制外部父容器静止滚动 （scroll-y:false），关闭弹框的时候允许滚动

属性

• v-model：控制 弹窗的显示/隐藏（true/false）目前有两种方式，1.通过ref 2.通过v-model
• direction： 组件弹出方向。 默认为 "top" // 方向 top，bottom，left，right
• autoClose： 击弹出遮罩层是否关闭，默认为true, 可设置为false则不手动关闭

方法

• show(): 弹出
• close():关闭
• @closeCallBack：弹窗关闭后的回调事件（响应客户需求，尽量满足）

使用方法

1. 首先download包，将下载下来的popup-layer.vue文件拷贝到你自己的项目中。

2. 在需要的地方引入组件并声明。

<script>
    import popupLayer from '../../components/popup-layer.vue';
    export default {
        components:{
            popupLayer
        }
    }
</script>

3. 使用组件

<popup-layer ref="popupRef" :direction="'top'" v-model="boolShow">
  <view class="zidingyiBox">
  </view>
</popup-layer>

4. 弹出与关闭

this.$refs.popupRef.show() // 弹出
this.$refs.popupRef.close() // 关闭

5. Demo用例

<template>
  <view class="test">
    <button type="primary" @tap="show">弹出</button>
      <popup-layer ref="popupRef" :direction="'top'">
        <view class="box" >
          <button type="primary" @tap="close">关闭</button>
        </view>
      </popup-layer>
  </view>
</template>

<script>
    import popupLayer from '../../components/popup-layer.vue';
    export default {
        components:{
            popupLayer
        },
    data(){
      return {
         boolShow:false
      }
    },
        methods:{
            show(){
                this.$refs.popupRef.show(); // 或者 boolShow = rue
            },
            close(){
                this.$refs.popupRef.close();// 或者 boolShow = false
            }
        }
    }
</script>