更新记录

0.0.2（2019-12-16） 下载此版本

优化展示方式，使用v-model 双向绑定展示弹层

平台兼容性

<template>
    <view class="content">
        <button class="showBtn" @click="toshow('left')" >左侧弹出</button>
        <button class="showBtn" @click="toshow('right')">右侧弹出</button>
        <button class="showBtn" @click="toshow('top')">上方弹出</button>
        <button class="showBtn" @click="toshow('bottom')">下方弹出</button>
        <popup v-model="showModel" position="left" ref="lvvpopref">
            <view class="popupBg"  style="width: 50%;height: 100%;left:0;">
                左侧弹出
            </view>
        </popup>
        <popup v-model="showModel2" position="right" ref="lvvpopref">
            <view class="popupBg"  style="width: 50%;height: 100%;right:0;">
                右侧弹出
            </view>
        </popup>
        <popup v-model="showModel3" position="top" ref="lvvpopref">
            <view class="popupBg"  style="width: 100%;height: 50%;left:0;top:0;">
                顶部弹出
            </view>
        </popup>
        <popup v-model="showModel4" position="bottom" ref="lvvpopref">
            <view class="popupBg"  style="width: 100%;height: 50%;left:0;bottom:0;">
                底部弹出
            </view>
        </popup>
    </view>
</template>

<script>
    import popup from '../../components/lvv-popup/lvv-popup.vue'
    export default {
        components:{popup},
        data() {
            return {
                title: 'Hello',
                showModel:false,
                showModel2:false,
                showModel3:false,
                showModel4:false,
            }
        },
        onLoad() {

        },
        methods: {
            toshow(value){
                switch(value){
                    case 'left':this.showModel = true;
                    break;
                    case 'right':this.showModel2 = true;
                    break;
                    case 'top':this.showModel3 = true;
                    break;
                    case 'bottom':this.showModel4 = true;
                    break;
                }
            }
        }
    }
</script>

<style>
    .content{
        width: 100%;
        min-height: 100vh;
        padding: 20rpx;
        box-sizing: border-box;
    }
    .showBtn{
        margin-top: 20rpx;
    }
    .popupBg{
        background: #f8f8f8;
        position: absolute;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
</style>