uniapp vue3 小程序中 帮我封装一个drawer组建 并且有动画效果 开启的时候 是 从上到下 关闭的时候是从下到上

在UniApp的Vue3环境中，封装一个带动画效果的抽屉组件（通常称为Drawer或侧滑菜单）可以使用Vuex管理状态，以及CSS Transition或动画库（如Vant UI库中的Drawer组件或者自定义CSS动画）。下面是一个简单的示例：

首先，安装依赖（如果尚未安装Vant UI库，可以通过`uni-app`命令行工具添加）：

npm install vant vant-weapp

然后，在store中创建一个状态变量来控制Drawer的状态：

// store/index.js
import { createStore } from 'vant';
import Vue from 'vue';

export default createStore({
  state: {
    isDrawerOpen: false,
  },
  mutations: {
    toggleDrawer(state) {
      state.isDrawerOpen = !state.isDrawerOpen;
    },
  },
  actions: {},
});

接着，在components文件夹中创建Drawer.vue文件：

<!-- components/Drawer.vue -->
<template>
  <view class="drawer">
    <v-dialog :visible.sync="isDrawerOpen" @close="toggleDrawer">
      <!-- 抽屉内容 -->
      <view class="drawer-content">
        <!-- ... -->
      </view>
    </v-dialog>

    <!-- 动画切换 -->
    <transition name="slide-animation">
      <v-view v-if="isDrawerOpen" :style="{ height: isOpen ? '100%' : '0', transform: isOpen ? 'translateY(0)' : 'translateY(-100%)' }"></v-view>
    </transition>
  </view>
</template>

<style scoped>
.slide-animation-enter-active,
.slide-animation-leave-active {
  transition: all 0.5s ease-in-out;
}

.slide-animation-enter,
.slide-animation-leave-to {
  transform: translateY(-100%);
}
</style>

<script setup>
import { useStore } from '@/store';
const store = useStore();

const isOpen = computed(() => store.state.isDrawerOpen);
</script>

在这个例子中，我们使用了Vant的Drawer组件，并通过`:visible.sync`绑定了store的状态。当状态改变时，抽屉会相应地打开或关闭。同时，我们使用了Vue的过渡效果来实现抽屉的上下移动动画。

为了更好地控制动画效果，你可以调整`.slide-animation-enter`, `.slide-animation-leave-active`, `.slide-animation-enter-active` 和 `.slide-animation-leave-to`的样式。