vue3 ts uni-app 微信小程序 抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透

代码如下：

<template>
  <!-- 解决滚动穿透 -->
  <page-meta
    :page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')"
  ></page-meta>
    <view>
         <view class="pm-ch-more" @tap="openMoreTask()">更多 ></view>
         <uni-drawer
          ref="moreTaskRef"
          @change="drawerChange"
          mode="right"
          >
          <view class="scroll-view">
            <scroll-view class="scroll-view-box" scroll-y="true">
              <view class="close">
                <button @tap="closeMoreTask()">
                  <text class="word-btn-white">关闭Drawer</text>
                </button>
              </view>
              <view class="info-content" v-for="item in 10" :key="item">
                <text>可滚动内容 {{ item }}</text>
              </view>
            </scroll-view>
          </view>
        </uni-drawer>
      </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const state = reactive({
  popupShow: false,
})
const drawerChange = (e: any) => {
  state.popupShow = e
}
const moreTaskRef = ref()
// 打开
const openMoreTask = ()=>{
  moreTaskRef.value.open()
}
// 关闭
const closeMoreTask = ()=>{
  moreTaskRef.value.close()
}
</script>