ElementUI 抽屉组件高度封装

        在前端开发中，ElementUI 的el-drawer组件虽实用，但为满足复杂业务需求，如统一样式、特定交互和灵活使用，常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。

创建基础封装组件

创建MyDrawer.vue，引入el-drawer搭建基础结构：

<template>
  <el-drawer
    :visible.sync="drawerVisible"
    :direction="drawerDirection"
    :size="drawerSize"
    :title="drawerTitle"
    :before-close="handleClose"
  >
    <slot></slot>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
const drawerVisible = ref(false);
const drawerDirection = ref('right');
const drawerSize = ref('300px');
const drawerTitle = ref('');
const handleClose = (done) => done();
</script>

<style scoped>
.el-drawer { background-color: #f9f9f9; }
</style>

解释：

• template部分：通过v-bind绑定多个属性，visible.sync控制显示状态，direction指定滑出方向，size设定尺寸，title添加标题，before-close绑定关