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绑定关闭回调，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 抽屉组件，能满足多种业务场景需求，实际项目中可按需扩展优化。