vue3用elementplus封装el-drawer

可以按照以下步骤使用 Element Plus 封装 el-drawer 组件：

1. 安装 Element Plus

在项目中安装 Element Plus，可以使用 npm 或 yarn：

npm install element-plus --save

或

yarn add element-plus

2. 创建 Drawer 组件

在 components 目录下创建 Drawer.vue 文件，定义 Drawer 组件的模板和样式：

<template>
  <el-drawer
    :visible="visible"
    :direction="direction"
    :size="size"
    :before-close="beforeClose"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :lock-scroll="lockScroll"
    :modal="modal"
    :custom-class="customClass"
    :with-header="withHeader"
    :with-footer="withFooter"
    :show-close="showClose"
  >
    <div class="drawer-body">
      <slot></slot>
    </div>
  </el-drawer>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Drawer',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: 'rtl',
    },
    size: {
      type: String,
      default: '30%',
    },
    beforeClose: Function,
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },
    lockScroll: {
      type: Boolean,
      default: true,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    customClass: String,
    withHeader: {
      type: Boolean,
      default: true,
    },
    withFooter: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
  },
});
</script>

<style>
.drawer-body {
  padding: 20px;
}
</style>

3. 注册 Drawer 组件

在 main.js 中注册 Drawer 组件：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import Drawer from './components/Drawer.vue';

const app = createApp(App);
app.use(ElementPlus);
app.component('Drawer', Drawer);
app.mount('#app');

4. 使用 Drawer 组件

在需要使用 Drawer 组件的页面中引入：

<template>
  <div>
    <el-button @click="openDrawer">打开 Drawer</el-button>
    <drawer :visible="visible" @update:visible="visible = $event">
      <h3 slot="title">这是标题</h3>
      <p>这是内容</p>
    </drawer>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    Drawer: () => import('./components/Drawer.vue'),
  },
  setup() {
    const visible = ref(false);

    function openDrawer() {
      visible.value = true;
    }

    return {
      visible,
      openDrawer,
    };
  },
});
</script>

这样就可以使用 Element Plus 封装的 Drawer 组件了。