当前位置: 首页 > news >正文

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

相关文章:

ElementUI 抽屉组件高度封装

在前端开发中&#xff0c;ElementUI 的el-drawer组件虽实用&#xff0c;但为满足复杂业务需求&#xff0c;如统一样式、特定交互和灵活使用&#xff0c;常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。 创建基础封装组件 创建MyDrawer.vue&#xff0c;引入e…...

深入解析:如何在C#和C/C++之间安全高效地通过P/Invoke传递多维数组

在工业控制、机器人编程和物联网等领域&#xff0c;我们经常需要让C#这样的托管语言与C/C编写的底层库进行交互。在这个过程中&#xff0c;遇到需要传递多维数组的场景时&#xff0c;许多开发者会意外遭遇System.Runtime.InteropServices.MarshalDirectiveException异常。本文将…...

轻量级在线ETL数据集成工具架构设计与技术实现深度剖析

在当今数字化时代,企业面临着海量异构数据的整合挑战。ETL(Extract, Transform, Load)工具作为数据集成的核心,负责将分散在不同数据源中的数据进行抽取、转换和加载,以构建统一的数据视图。本文将深入剖析一款基于诺依框架开发的在线ETL数据集成工具,重点阐述其架构设计…...

二、k8s项目的生命周期

项目的生命周期 创建-----------》发布-----------》更新--------》回滚----------》删除 kubectl create deployment nginx1 --imagenginx:1.22 --replicas3 基于deployment控制器创建pod 控制器的名称是nginx1 pod使用的镜像:nginx:1.22 --replicas3 pod的数量有多少 3个…...

GPT 系列模型发展史:从 GPT 到 ChatGPT 的演进与技术细节

从 GPT 到 ChatGPT&#xff0c;OpenAI 用短短几年时间&#xff0c;彻底改变了自然语言处理&#xff08;NLP&#xff09;的格局。让我们一起回顾这段激动人心的技术演进史&#xff01;&#x1f680; &#x1f539; GPT&#xff08;2018&#xff09;&#xff1a; 划时代的起点&a…...

C#语言的云计算

C#语言在云计算中的应用 引言 随着信息技术的飞速发展&#xff0c;云计算已经成为了现代计算架构的重要组成部分。传统的本地计算方式逐渐被云计算所取代&#xff0c;使得企业与开发者能够更高效地处理数据、部署应用程序以及进行资源管理。在众多编程语言中&#xff0c;C#以…...

金仓数据库-KingbaseES-学习-01-单机部署(非图形化安装)

目录 一、环境信息 二、介绍 三、下载地址 四、安装步骤 1、配置内核参数 &#xff08;1&#xff09;文件系统相关 &#xff08;2&#xff09;共享内存与信号量&#xff08;IPC&#xff09; &#xff08;3&#xff09;网络与端口配置 &#xff08;4&#xff09;关键场…...

海外服务器都有什么作用?

海外服务器具体就是指部署在中国大陆以外地区的服务器&#xff0c;企业选择租用海外服务器能够显著提高不同国家和地区用户的访问速度&#xff0c;当网站的服务器部署在目标用户所在地附近时&#xff0c;数据信息所传输的距离就会缩短&#xff0c;大大降低了网络访问的延迟度&a…...

git bash在github的库中上传或更新本地文件

一、将本地文件上传到 GitHub 仓库 1. 创建 GitHub 仓库 如果你还没有在 GitHub 上创建仓库&#xff0c;首先需要创建一个新的仓库&#xff1a; 登录到 GitHub。点击右上角的 按钮&#xff0c;选择 New repository。给你的仓库起个名字&#xff0c;并选择 Public 或 Privat…...

vue2中 computed 计算属性

文章目录 vue2中 computed 计算属性1. 什么是计算属性&#xff1f;2. 基本用法1. 定义计算属性2. 计算属性的缓存特性 3. 计算属性的高级用法1. 计算属性的 Getter 和 Setter 方法2. 计算属性的依赖追踪 4. 计算属性与方法的区别5. 实际应用案例1. 格式化数据2. 计算总价3. 动态…...

自定义基座实时采集uniapp日志

自定义基座实时采集uniapp日志 打测试包给远端现场(测试/客户)实际测试时也能实时看到日志了&#xff0c;也有代码行数显示。 流程设计 #mermaid-svg-1I5W9r1DU4xUsaTF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid…...

基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 系统建模 4.2 YALMIP工具箱 4.3 CPLEX工具箱 5.完整工程文件 1.课题概述 基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真。通过YALMIP和cplex这两个工具箱&#xff0c;完成微电网的最优调…...

Effective Objective-C 2.0 读书笔记——内存管理(上)

Effective Objective-C 2.0 读书笔记——内存管理&#xff08;上&#xff09; 文章目录 Effective Objective-C 2.0 读书笔记——内存管理&#xff08;上&#xff09;引用计数属性存取方法中的内存管理autorelease保留环 ARCARC必须遵循的方法命名原则ARC 的自动优化&#xff1…...

蓝桥杯-洛谷刷题-day5(C++)(为未完成)

1.P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 i.题目 ii.代码 #include <iostream> #include <string> using namespace std;int N, Na, Nb; //0-"剪刀", 1-"石头", 2-"布", 3-"蜥", 4-"斯"&#xff1…...

conda 修复 libstdc++.so.6: version `GLIBCXX_3.4.30‘ not found 简便方法

ImportError: /data/home/hum/anaconda3/envs/ipc/bin/../lib/libstdc.so.6: version GLIBCXX_3.4.30 not found (required by /home/hum/anaconda3/envs/ipc/lib/python3.11/site-packages/paddle/base/libpaddle.so) 1. 检查版本 strings /data/home/hum/anaconda3/envs/ipc/…...

数据结构之队列,哈希表

一 队列(先进先出) 1.定义&#xff1a;从一端进行数据插入&#xff0c;另一端进行删除的线性存储结构 队列类型 常见操作 - 入队&#xff08;Enqueue&#xff09;&#xff1a;将新元素添加到队列的尾部。若队列有空间&#xff0c;新元素会成为队列的新尾部元素&#xff1b;若…...

讯方·智汇云校华为授权培训机构的介绍

官方授权 华为授权培训服务伙伴&#xff08;Huawei Authorized Learning Partner&#xff0c;简称HALP&#xff09;是获得华为授权&#xff0c;面向公众&#xff08;主要为华为企业业务的伙伴/客户&#xff09;提供与华为产品和技术相关的培训服务&#xff0c;培养华为产业链所…...

【16届蓝桥杯寒假刷题营】第1期DAY4

1.披萨和西蓝花 - 蓝桥云课 1. 披萨和西蓝花 问题描述 在接下来的 N 天里&#xff08;编号从 1 到 N&#xff09;&#xff0c;坤坤计划烹饪披萨或西兰花。他写下一个长度为 N 的字符串 A&#xff0c;对于每个有效的 i&#xff0c;如果字符 Ai 是 1&#xff0c;那么他将在第 i…...

【Linux】cron计划任务定时执行命令

在Linux系统中&#xff0c;crontab 是一种用于设置周期性执行任务的工具&#xff0c;通过编辑 crontab 文件&#xff0c;用户可以指定在特定时间自动运行命令或脚本。以下是关于 crontab 的详细介绍&#xff1a; 1. crontab 基本结构 每个 crontab 任务由一行配置组成&#xf…...

rdian是一个结构体,pdian=^Rdian,list泛型做什么用?

不明白不让编译的原因&#xff0c;记录下之遇到注意原油。 var mylist:TList<string>; mylist1:TList<Pdian>; mydian:Pdian; i:Integer; mylist2:TList<Rdian>; mydian2:rdian; arr:array of Rdian; begin mylist:TList…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...