企业备案 网站名称,SEO网站公司,外贸品牌推广公司,怎么样进行网站建设在前端开发中#xff0c;ElementUI 的el-drawer组件虽实用#xff0c;但为满足复杂业务需求#xff0c;如统一样式、特定交互和灵活使用#xff0c;常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。 创建基础封装组件
创建MyDrawer.vue#xff0c;引入e… 在前端开发中ElementUI 的el-drawer组件虽实用但为满足复杂业务需求如统一样式、特定交互和灵活使用常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。 创建基础封装组件
创建MyDrawer.vue引入el-drawer搭建基础结构
templateel-drawer:visible.syncdrawerVisible:directiondrawerDirection:sizedrawerSize:titledrawerTitle:before-closehandleCloseslot/slot/el-drawer
/templatescript setup
import { ref } from vue;
const drawerVisible ref(false);
const drawerDirection ref(right);
const drawerSize ref(300px);
const drawerTitle ref();
const handleClose (done) done();
/scriptstyle 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-classdrawerAnimationClass.../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-drawerel-loading v-ifisLoading :fullscreenfalse :textloadingText/el-loadingslot 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 openhandleOpen.../el-drawer
const handleOpen () console.log(抽屉已打开);
解释抽屉打开时触发handleOpen函数可用于添加统计代码、初始化数据等。 2.抽屉关闭事件监听close处理关闭完成逻辑。
el-drawer closehandleClosed.../el-drawer
const handleClosed () console.log(抽屉已关闭);
解释抽屉关闭完成时触发handleClosed函数可用于重置数据状态等。 动态配置
通过props实现抽屉标题和内容的动态配置。
templateel-drawer :titleprops.title.../el-drawer
/templatescript setup
const props defineProps({ title: { type: String, default: } });
/script
解释使用defineProps定义title属性使用组件时可传入不同标题动态设置。 自定义插槽
1.自定义标题插槽允许自定义抽屉标题内容。
el-drawertemplate #headerdiv classcustom-drawer-header{{ props.title }}/div/template...
/el-drawer
解释通过template #header插槽将props.title包裹在div中方便定制样式。 2.自定义内容插槽在抽屉内容区域添加自定义逻辑。
el-drawertemplate #defaultdiv v-ifprops.contentType text{{ props.content }}/divimg v-else-ifprops.contentType image :srcprops.content alt自定义图片/template...
/el-drawer
const props defineProps({contentType: { type: String, default: text },content: { type: [String, Object], default: }
});
解释定义contentType和content属性根据contentType显示文本或图片方便传入不同类型内容数据。
通过以上步骤完成了高度封装的 ElementUI 抽屉组件能满足多种业务场景需求实际项目中可按需扩展优化。
