<template>
  <view>
    <uni-section title="右侧滑出" type="line">
      <view class="example-body">
        <button type="primary" @click="showDrawer('showRight')">
          <text class="word-btn-white">显示Drawer</text>
        </button>
        <uni-drawer   ref="showRight"   mode="right" :mask-click="false"  >
          <view class="close">
            <button @click="closeDrawer('showRight')">
              <text class="word-btn-white">关闭Drawer</text>
            </button>
          </view>
        </uni-drawer>
      </view>
    </uni-section>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 创建 drawer 的 ref 引用
const showRight = ref(null) 

// 打开窗口
const showDrawer = (e) => {
  const drawer = showRight.value // 获取正确的 drawer 实例
  drawer.open()
}

// 关闭窗口
const closeDrawer = (e) => {
  const drawer = showRight.value // 获取正确的 drawer 实例
  drawer.close()
}

 
</script>

<style lang="scss">
.example-body {
  padding: 10px;
}

.close {
  padding: 10px;
}
</style>
