html代码

<template>
    <view class="drawer">
         <button @click="clickBtn">点击</button>       
         <!-- self可以理解为跳过冒泡事件，即捕获事件在该元素上发生的方法。 -->
         <view class="background" v-if="open" @click.self="closeDrop">
            <view class="drop" :class="{ active: isActive, close: isClose }">drop</view>
         </view>
    </view>
</template>

js代码

<script>
    export default {
        data() {
            return {
                // 抽屉
                open: false,
                isActive: false,
                isClose: false
            }
        },
        onLoad() {

        },
        methods: {
            // 抽屉 s
            clickBtn() {
                this.open = true;
                this.isActive = true;
                this.isClose = false;
            },
            // 控制点击遮罩关闭抽屉
            closeDrop() {
                this.isClose = true;
                setTimeout(() => {
                    this.open = false;
                }, 200);
            }
            // 抽屉 e
        }
    }
</script>

css代码

<style scoped lang="scss">
    
    .background {
        // z-index 控制是全屏还是半屏，即是否占顶部导航栏的位置
        z-index: 9999;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        // 遮罩颜色
        background: rgba($color: #000000, $alpha: 0.5);
        .drop {
            width: 0px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            background: #fff;
        }
        // 开
        .active {
            animation: opendoor 0.5s normal forwards;
        }
        // @keyframes 可以创建动画；
        // opendoor对应上方active类中animation属性的opendoor
        @keyframes opendoor {
            from {
                width: 0;
            }
            to {
                //打开的抽屉宽度
                width: 66%;
             }
         }
        // 关
        .close {
             animation: close 0.3s normal forwards;
        }
        // close对应上方close类中animation属性的 close
        @keyframes close {
            0% {
                width: 66%;
            }
            100% {
                width: 0;
                opacity: 0;
            }
        }
    }
</style>