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 抽屉组件高度封装
在前端开发中,ElementUI 的el-drawer组件虽实用,但为满足复杂业务需求,如统一样式、特定交互和灵活使用,常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。 创建基础封装组件 创建MyDrawer.vue,引入e…...
深入解析:如何在C#和C/C++之间安全高效地通过P/Invoke传递多维数组
在工业控制、机器人编程和物联网等领域,我们经常需要让C#这样的托管语言与C/C编写的底层库进行交互。在这个过程中,遇到需要传递多维数组的场景时,许多开发者会意外遭遇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,OpenAI 用短短几年时间,彻底改变了自然语言处理(NLP)的格局。让我们一起回顾这段激动人心的技术演进史!🚀 🔹 GPT(2018): 划时代的起点&a…...
C#语言的云计算
C#语言在云计算中的应用 引言 随着信息技术的飞速发展,云计算已经成为了现代计算架构的重要组成部分。传统的本地计算方式逐渐被云计算所取代,使得企业与开发者能够更高效地处理数据、部署应用程序以及进行资源管理。在众多编程语言中,C#以…...
金仓数据库-KingbaseES-学习-01-单机部署(非图形化安装)
目录 一、环境信息 二、介绍 三、下载地址 四、安装步骤 1、配置内核参数 (1)文件系统相关 (2)共享内存与信号量(IPC) (3)网络与端口配置 (4)关键场…...
海外服务器都有什么作用?
海外服务器具体就是指部署在中国大陆以外地区的服务器,企业选择租用海外服务器能够显著提高不同国家和地区用户的访问速度,当网站的服务器部署在目标用户所在地附近时,数据信息所传输的距离就会缩短,大大降低了网络访问的延迟度&a…...
git bash在github的库中上传或更新本地文件
一、将本地文件上传到 GitHub 仓库 1. 创建 GitHub 仓库 如果你还没有在 GitHub 上创建仓库,首先需要创建一个新的仓库: 登录到 GitHub。点击右上角的 按钮,选择 New repository。给你的仓库起个名字,并选择 Public 或 Privat…...
vue2中 computed 计算属性
文章目录 vue2中 computed 计算属性1. 什么是计算属性?2. 基本用法1. 定义计算属性2. 计算属性的缓存特性 3. 计算属性的高级用法1. 计算属性的 Getter 和 Setter 方法2. 计算属性的依赖追踪 4. 计算属性与方法的区别5. 实际应用案例1. 格式化数据2. 计算总价3. 动态…...
自定义基座实时采集uniapp日志
自定义基座实时采集uniapp日志 打测试包给远端现场(测试/客户)实际测试时也能实时看到日志了,也有代码行数显示。 流程设计 #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这两个工具箱,完成微电网的最优调…...
Effective Objective-C 2.0 读书笔记——内存管理(上)
Effective Objective-C 2.0 读书笔记——内存管理(上) 文章目录 Effective Objective-C 2.0 读书笔记——内存管理(上)引用计数属性存取方法中的内存管理autorelease保留环 ARCARC必须遵循的方法命名原则ARC 的自动优化࿱…...
蓝桥杯-洛谷刷题-day5(C++)(为未完成)
1.P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 i.题目 ii.代码 #include <iostream> #include <string> using namespace std;int N, Na, Nb; //0-"剪刀", 1-"石头", 2-"布", 3-"蜥", 4-"斯"࿱…...
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.定义:从一端进行数据插入,另一端进行删除的线性存储结构 队列类型 常见操作 - 入队(Enqueue):将新元素添加到队列的尾部。若队列有空间,新元素会成为队列的新尾部元素;若…...
讯方·智汇云校华为授权培训机构的介绍
官方授权 华为授权培训服务伙伴(Huawei Authorized Learning Partner,简称HALP)是获得华为授权,面向公众(主要为华为企业业务的伙伴/客户)提供与华为产品和技术相关的培训服务,培养华为产业链所…...
【16届蓝桥杯寒假刷题营】第1期DAY4
1.披萨和西蓝花 - 蓝桥云课 1. 披萨和西蓝花 问题描述 在接下来的 N 天里(编号从 1 到 N),坤坤计划烹饪披萨或西兰花。他写下一个长度为 N 的字符串 A,对于每个有效的 i,如果字符 Ai 是 1,那么他将在第 i…...
【Linux】cron计划任务定时执行命令
在Linux系统中,crontab 是一种用于设置周期性执行任务的工具,通过编辑 crontab 文件,用户可以指定在特定时间自动运行命令或脚本。以下是关于 crontab 的详细介绍: 1. crontab 基本结构 每个 crontab 任务由一行配置组成…...
rdian是一个结构体,pdian=^Rdian,list泛型做什么用?
不明白不让编译的原因,记录下之遇到注意原油。 var mylist:TList<string>; mylist1:TList<Pdian>; mydian:Pdian; i:Integer; mylist2:TList<Rdian>; mydian2:rdian; arr:array of Rdian; begin mylist:TList…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
如何配置一个sql server使得其它用户可以通过excel odbc获取数据
要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据,你需要完成以下配置步骤: ✅ 一、在 SQL Server 端配置(服务器设置) 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到:SQL Server 网络配…...
6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...
算术操作符与类型转换:从基础到精通
目录 前言:从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符:、-、*、/、% 赋值操作符:和复合赋值 单⽬操作符:、--、、- 前言:从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...
