王晴儿 网站建设腾讯云wordpress博客
在前端开发中，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绑定关闭回调，slot用于插入自定义内容。
- script setup部分：用ref创建响应式数据控制抽屉各项属性，handleClose用于关闭抽屉。
- style scoped部分：设置el-drawer背景色，scoped确保样式仅作用于当前组件。
封装常用功能
1.自定义动画效果：通过自定义过渡类名实现独特动画。
<el-drawer :custom-class="drawerAnimationClass">...</el-drawer>const drawerAnimationClass = ref('custom-drawer-animation');.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.加载状态处理：抽屉内容加载时显示加载状态。
<el-drawer><el-loading v-if="isLoading" :fullscreen="false" :text="loadingText"></el-loading><slot v-else></slot>
</el-drawer>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执行特定操作。
<el-drawer @open="handleOpen">...</el-drawer>const handleOpen = () => console.log('抽屉已打开');解释：抽屉打开时触发handleOpen函数，可用于添加统计代码、初始化数据等。
2.抽屉关闭事件：监听@close处理关闭完成逻辑。
<el-drawer @close="handleClosed">...</el-drawer>const handleClosed = () => console.log('抽屉已关闭');解释：抽屉关闭完成时触发handleClosed函数，可用于重置数据状态等。
动态配置
通过props实现抽屉标题和内容的动态配置。
<template><el-drawer :title="props.title">...</el-drawer>
</template><script setup>
const props = defineProps({ title: { type: String, default: '' } });
</script>解释：使用defineProps定义title属性，使用组件时可传入不同标题动态设置。
自定义插槽
1.自定义标题插槽：允许自定义抽屉标题内容。
<el-drawer><template #header><div class="custom-drawer-header">{{ props.title }}</div></template>...
</el-drawer>解释：通过template #header插槽，将props.title包裹在div中方便定制样式。
2.自定义内容插槽：在抽屉内容区域添加自定义逻辑。
<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>const props = defineProps({contentType: { type: String, default: 'text' },content: { type: [String, Object], default: '' }
});解释：定义contentType和content属性，根据contentType显示文本或图片，方便传入不同类型内容数据。
通过以上步骤，完成了高度封装的 ElementUI 抽屉组件，能满足多种业务场景需求，实际项目中可按需扩展优化。