更新记录

2.1.0（2024-08-20） 下载此版本

更新抽屉打开关闭的监听事件

2.0.0（2024-08-20） 下载此版本

更新四种弹出方式，可修改遮罩层颜色和透明度

1.2.0（2024-08-19） 下载此版本

修改部分bug

平台兼容性

laopobing-drawer

uniapp x版

反馈qq(点击加群)：981847659

文档

数据&布局配置

基本使用（setup）

<script setup lang="uts">
    const drawerBox = ref<ComponentPublicInstance | null>(null);

    // 使用组件内部的显示隐藏方法
    const showFun = () => { drawerBox.value?.$callMethod('show'); }
    const hideFun = () => { drawerBox.value?.$callMethod('hide'); }

    const changeFun = (show : boolean) => { console.log(show); }
</script>

<template>
        <view class="btns">
            <text class="popup_btn" @click="showFun"> 显示 </text>
            <text class="popup_btn" @click="hideFun"> 隐藏 </text>
        </view>

        <laopobing-drawer :height="400" ref='drawerBox' :showMask="true" @change="changeFun">
            <view class="content" v-for="item in 50">
                <text>内容</text>
            </view>
        </laopobing-drawer>
</template>

<style lang="scss" scoped>
    .btns {
        margin-top: 10px;
        flex-direction: row;

        .popup_btn {
            flex: 1;
            padding: 5px 10px;
            margin: 0 40px 10px;

            text-align: center;

            border-radius: 10px;
            border: 1px solid #cecece;
        }
    }
</style>