更新记录

1.1.8（2023-06-08） 下载此版本

增加预览二维码

1.1.7（2023-05-31） 下载此版本

增加license

1.1.6（2023-05-30） 下载此版本

适配自定义导航栏

平台兼容性

liu-popuo适用于uni-app项目的弹出层组件

本组件目前兼容微信小程序、H5

本组件支持自定义，支持设置背景色，动画，圆角，自定义宽高，弹出方向

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用方式

<template>
    <view>
        <view class="box">
            <view @click="openPopup('top')" class="btn">上面打开弹窗</view>
            <view @click="openPopup('bottom')" class="btn">下面打开弹窗</view>
            <view @click="openPopup('left')" class="btn">左面打开弹窗</view>
            <view @click="openPopup('right')" class="btn">右面打开弹窗</view>
            <view @click="openPopup('center')" class="btn">中间打开弹窗</view>
        </view>
        <liu-popup type="top" ref="top" radius="12rpx">
            上面打开弹窗
        </liu-popup>
        <liu-popup type="bottom" ref="bottom">
            下面打开弹窗
        </liu-popup>
        <liu-popup type="left" ref="left">
            左面打开弹窗
        </liu-popup>
        <liu-popup type="right" ref="right">
            右面打开弹窗
        </liu-popup>
        <liu-popup type="center" ref="center">
            中间打开弹窗
        </liu-popup>
    </view>
</template>
<script>
    export default {
        data() {
            return {};
        },
        methods: {
            openPopup(e) {
                this.$refs[e].open();
            },
        },
    };
</script>
<style lang="scss">
    .box {
        padding: 32rpx;
    }

    .btn {
        width: 686rpx;
        height: 88rpx;
        background: #2182fe;
        border-radius: 8rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #ffffff;
        margin-top: 20rpx;
    }
</style>

属性说明