ElementUI 抽屉组件高度封装

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

创建基础封装组件

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

html 复制代码

<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绑定关闭回调，slot用于插入自定义内容。

script setup部分：用ref创建响应式数据控制抽屉各项属性，handleClose用于关闭抽屉。

style scoped部分：设置el-drawer背景色，scoped确保样式仅作用于当前组件。

封装常用功能

1.自定义动画效果：通过自定义过渡类名实现独特动画。

html 复制代码

<el-drawer :custom-class="drawerAnimationClass">...</el-drawer>

javascript 复制代码

const drawerAnimationClass = ref('custom-drawer-animation');

css 复制代码

.custom-drawer-animation {
  transition: transform 0.3s ease-in-out;
  transform: translateX(100%);
}
.custom-drawer-animation.is-active {
  transform: translateX(0);
}

解释：通过custom-class绑定动画类名，在 CSS 中定义从右侧滑入的平移动画。

2.加载状态处理：抽屉内容加载时显示加载状态。

html 复制代码

<el-drawer>
  <el-loading v-if="isLoading" :fullscreen="false" :text="loadingText"></el-loading>
  <slot v-else></slot>
</el-drawer>

javascript 复制代码

const isLoading = ref(false);
const loadingText = ref('加载中...');
const fetchDrawerContent = async () => {
  isLoading.value = true;
  await new Promise((resolve) => setTimeout(resolve, 2000));
  isLoading.value = false;
};

解释：el-loading组件根据isLoading的值显示或隐藏，fetchDrawerContent函数模拟异步加载数据。

事件处理

1.抽屉打开事件：监听@open执行特定操作。

html 复制代码

<el-drawer @open="handleOpen">...</el-drawer>

javascript 复制代码

const handleOpen = () => console.log('抽屉已打开');

解释：抽屉打开时触发handleOpen函数，可用于添加统计代码、初始化数据等。

2.抽屉关闭事件：监听@close处理关闭完成逻辑。

html 复制代码

<el-drawer @close="handleClosed">...</el-drawer>

javascript 复制代码

const handleClosed = () => console.log('抽屉已关闭');

解释：抽屉关闭完成时触发handleClosed函数，可用于重置数据状态等。

动态配置

通过props实现抽屉标题和内容的动态配置。

html 复制代码

<template>
  <el-drawer :title="props.title">...</el-drawer>
</template>

<script setup>
const props = defineProps({ title: { type: String, default: '' } });
</script>

解释：使用defineProps定义title属性，使用组件时可传入不同标题动态设置。

自定义插槽

1.自定义标题插槽：允许自定义抽屉标题内容。

html 复制代码

<el-drawer>
    <template #header>
        <div class="custom-drawer-header">{
  
  { props.title }}</div>
    </template>
    ...
</el-drawer>

解释：通过template #header插槽，将props.title包裹在div中方便定制样式。

2.自定义内容插槽：在抽屉内容区域添加自定义逻辑。

html 复制代码

<el-drawer>
  <template #default>
    <div v-if="props.contentType === 'text'">{
  
  { props.content }}</div>
    <img v-else-if="props.contentType === 'image'" :src="props.content" alt="自定义图片">
  </template>
 ...
</el-drawer>

javascript 复制代码

const props = defineProps({
  contentType: { type: String, default: 'text' },
  content: { type: [String, Object], default: '' }
});

解释：定义contentType和content属性，根据contentType显示文本或图片，方便传入不同类型内容数据。

通过以上步骤，完成了高度封装的 ElementUI 抽屉组件，能满足多种业务场景需求，实际项目中可按需扩展优化。