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

vue vue3 手写 动态加载组件

效果展示

一、需求背景:

# vue3 项目涉及很多图表加载、表格加载 #考虑手写一个动态加载组件

二、实现思路

通过一个加载状态变量,通过v-if判断,加载状态的变量等于哪一个,动态加载组件内部就显示的哪一块组件。

三、实现效果

四、代码

(一)、封装组件

<template><view class="loadding_contaniers" v-if="loadState == 1"><view class="loading_img"><image src="@/static/images/smartCabin/loadingImg/isLoading_bg.png" /></view><view class="imgTitle">加载中<text id="dot">...</text></view></view><view class="loadding_contaniers" v-else-if="loadState == 2"><view class="loading_img"><image src="@/static/images/smartCabin/loadingImg/isErr_bg.png" /></view><view class="imgTitle">请求失败,请重新加载!</view></view><view class="loadding_contaniers" v-else-if="loadState == 3"><view class="loading_img"><image src="@/static/images/smartCabin/loadingImg/isNone_bg.png" /><!-- <image:src="getAssetsFile(props.noticeTip == '暂无数据'? `smartCabin/loadingImg/isNone_bg.png`: `smartCabin/loadingImg/isErr_bg2.png`)"/> --></view><view class="imgTitle">{{ noticeTip }}</view></view><view class="loadding_sucess" v-else><slot> </slot></view>
</template><script>
export default {props: {// 1:加载中 2:加载失败 3:暂无数据 4:加载成功loadState: Number,noticeTip: {type: String,default: "暂无数据",},},
};
</script><style lang="scss">
.loadding_contaniers {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;.loading_img {image {width: 260rpx;height: 260rpx;}}.imgTitle {flex: 1;height: 0;color: #757575;#dot {display: inline-block;width: 1.5em;vertical-align: bottom;overflow: hidden;animation: dotting 0.5s infinite step-start;}@keyframes dotting {0% {width: 0;margin-right: 1.5em;}33% {width: 0.5em;margin-right: 1em;}66% {width: 1em;margin-right: 0.5em;}100% {width: 1.5em;margin-right: 0;}}}
}
.loadding_sucess {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
</style>

 (二)、组件传参

h5使用

<LoaddING :loadState="4" :noticeTip="'当loadState是成功的时候'"><view class="myContent"><imagesrc="@/static/images/energy/elePower/receiving_power.png"/></view>
</LoaddING>

web端使用 

<LoaddING :loadState="data.isFinish" :noticeTip="data.isTips"><!-- 插槽组件 --><ewClickLine:yAxisUnit="echartData2.unit":seriesColor="echartData2.color":legend="{ show: true, x: '80%' }":seriesName="echartData2.name":seriesType="echartData2.chartSeriesType":xAxisValue="echartData2.lineXAxisValue":nums="echartData2.lineNums"></ewClickLine>
</LoaddING>

相关文章:

vue vue3 手写 动态加载组件

效果展示 一、需求背景&#xff1a; # vue3 项目涉及很多图表加载、表格加载 #考虑手写一个动态加载组件 二、实现思路 通过一个加载状态变量&#xff0c;通过v-if判断&#xff0c;加载状态的变量等于哪一个&#xff0c;动态加载组件内部就显示的哪一块组件。 三、实现效果…...

HTML:表单

目录 案例&#xff1a; 一、form标签 二、input标签 三、textarea标签 四、select标签 五、fieldset 标签 案例&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>报名表</title> </head> &l…...

即插即用篇 | YOLOv5/v7引入Haar小波下采样 | 一种简单而有效的语义分割下采样模块

本改进已集成到 YOLOv5-Magic 框架。 下采样操作如最大池化或步幅卷积在卷积神经网络(CNNs)中被广泛应用,用于聚合局部特征、扩大感受野并减少计算负担。然而,对于语义分割任务,对局部邻域的特征进行池化可能导致重要的空间信息丢失,这有助于逐像素预测。为了解决这个问题…...

Plonky2.5:在Plonky2中验证Plonky3 proof

1. 引言 Plonky2.5为QED Protocol团队主导的项目&#xff0c;定位为&#xff1a; 在Plonky2 SNARK中验证Plonky3 STARK proof。 从而实现Plonky系列的递归证明。 开源代码实现见&#xff1a; https://github.com/QEDProtocol/plonky2.5https://github.com/Plonky3/Plonky3&a…...

卷积通用模型的剪枝、蒸馏---剪枝篇(此处以deeplabv3+为例,可根据模型自行定制剪枝层)

之后的两篇文章是对前段时间工作的一个总结。 一、环境配置 1.1、文章以b导的代码为模板,环境配置比较简单(第二篇蒸馏篇结束后会放置剪枝蒸馏配置好的百度网盘链接),其他算法自行配置,在剪枝之前,需要保证算法能够在本地跑通。 B导链接: https://github.com/bubbliiiin…...

使用Ollama在本地运行AI大模型gemma

1.下载&#xff1a; https://github.com/ollama/ollama/releases 2.配置环境变量 我的电脑-右键-属性-系统-高级系统设置-环境变量-【系统环境变量】新建 变量名&#xff1a;OLLAMA_MODELS &#xff08;固定变量名&#xff09; 变量值&#xff1a;E:\Ollama\Lib &#xff0…...

【IC前端虚拟项目】时序面积优化与综合代码出版本交付

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 到目前为止,我们完成了第一版综合,那么就可以打开报告看一下了,一看就会发现在1GHz时钟下时序真的很差(毕竟虚拟项目里使用的工艺库还是比较旧的,如果用12nm、7mn会好很多): Timing Path Group cl…...

windows版本-idea中下载的java版本在哪

1、点击idea的file-projectStructure 进入&#xff1a; 通过电脑目录进入该目录 找到bin目录&#xff0c;copy该目录地址 copy下来之后设置到系统环境变量中...

设计模式:创建者模式

定义 创建者模式&#xff08;Builder Pattern&#xff09;&#xff0c;又称建造者模式&#xff0c;是一种创建型设计模式&#xff0c;它提供了一种创建对象的最佳方式。该模式允许将一个复杂对象的构建与它的表示分离&#xff0c;这样同样的构建过程可以创建不同的表示。创建者…...

【linux】基础IO(四)

在上一篇基础IO中我们主要讲述了文件再磁盘中的存储&#xff0c;当然我们说的也都只是预备知识&#xff0c;为这一篇的文件系统进行铺垫。 目录 搭文件系统的架子&#xff1a;填补细节&#xff1a;inode&#xff1a;datablock[]: 更上层的理解&#xff1a; 搭文件系统的架子&a…...

集合框架(数组,Arrays.sort,list,map,set,stack,queue)蓝桥杯习题

前言(基本知识) List集合 有序&#xff0c;接口&#xff0c; List<引用数据类型> listnew ArrayList<>(); 方法&#xff1a; add() size() get()//索引index从0开始&#xff0c;返回对应的值 isEmpty()判断是否包含该元素,不包含返回true&#xff0c;包含返…...

【C++基础】运算符和流程控制语句

C中的运算符和流程控制语句 一、运算符1. C和Java在通用运算符中的不同之处对比2. C中的位运算符2.1 移位运算符2.2 位逻辑运算符 3. 运算时的类型转换总结3.1 隐式类型转换3.2 显式类型转换&#xff08;强制类型转换&#xff09; 4. 注意 二、流程控制语句1. C和Java在通用流程…...

AOF文件重写

1.2.3.AOF文件重写 因为是记录命令&#xff0c;AOF文件会比RDB文件大的多。而且AOF会记录对同一个key的多次写操作&#xff0c;但只有最后一次写操作才有意义。通过执行bgrewriteaof命令&#xff0c;可以让AOF文件执行重写功能&#xff0c;用最少的命令达到相同效果。 如图&am…...

第四次面试总结 — 嘉和智能 - 全栈开发

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对专栏 “本人真实面经” 很感兴趣o (ˉ▽ˉ&#xff1b;) 专栏 —— 本人真实面经&#xff0c;更多真实面试经验&#xff0c;中大厂面试总结等您挖掘 目录 总结&#xff08;非详细&#xff09; 面试内…...

tx-lcn使用

tx-lcn是啥 tx-lcn是一个分布式事务框架&#xff0c;有两个模块组成管理端&#xff08;server&#xff09;和client端。 管理端用于分布式事务的注册&#xff0c;事务消息接收&#xff0c;事务消息下发等管理工作。 client端包括事务发起方&#xff0c;事务参与方。 LCN名称是…...

oracle恢复异常处理

问题现象&#xff1a; RMAN> 2> 3> 4> 5> 6> 7> 8> 9> 10> 11> 12> 13> 14> 15> 16> 17> 18> 19> 20> 21> 22> 23> 24> using target database control file instead of recovery catalog allocate…...

谈谈什么是 Redis

&#x1f525;博客主页&#xff1a;fly in the sky - CSDN博客 &#x1f680;欢迎各位&#xff1a;点赞&#x1f44d;收藏⭐️留言✍️&#x1f680; &#x1f386;慢品人间烟火色,闲观万事岁月长&#x1f386; &#x1f4d6;希望我写的博客对你有所帮助,如有不足,请指正&#…...

备战蓝桥杯(java)(日益更新)

备战蓝桥杯&#xff08;java&#xff09;&#xff08;日益更新&#xff09; 文章目录 备战蓝桥杯&#xff08;java&#xff09;&#xff08;日益更新&#xff09;前言&#xff1a;一、c 到 java 须要注意的地方&#xff1a;二、多练java代码&#xff1a;&#xff08;用java代码…...

06 Php学习:字符串

PHP 中的字符串变量 在 PHP 中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储文本数据。字符串变量可以包含字母、数字、符号等字符&#xff0c;并且可以进行各种操作和处理。以下是关于 PHP 中字符串变量的一些重要信息&#xff1a; 定义字符串变量&#xff1…...

python画图Matplotlib和Seaborn

python画图Matplotlib和Season 一、Matplotlib1、介绍2、安装3、内容二、Seaborn1、介绍2、安装3、内容一、Matplotlib Matplotlib官网 1、介绍 Matplotlib 是一个 Python 的绘图库,用于创建高质量的二维图表和一些基本的三维图表。它广泛应用于科学计算、数据分析、工程学和…...

MySQL服务启动失败:NET HELPMSG 3534错误全面解析与实战解决方案

1. 遇到NET HELPMSG 3534错误时该怎么办 当你兴致勃勃地安装完MySQL&#xff0c;准备大干一场时&#xff0c;突然在命令行输入net start mysql后&#xff0c;屏幕上跳出"MySQL服务无法启动。服务没有报告任何错误。请键入NET HELPMSG 3534以获得更多的帮助"这样的提…...

MindFormers文本生成接口

MindFormers的文本生成接口&#xff08;.generate()&#xff09;是大模型推理流程中控制生成行为、整合输入与输出的核心工具&#xff0c;其设计兼顾灵活性与易用性&#xff0c;支持从基础文本生成到高阶自定义配置的多类场景。一、核心入参&#xff1a;定义生成的“输入”与“…...

d-id AI studio会员值得买吗?实测3大核心功能与免费版对比

d-id AI studio会员深度评测&#xff1a;三大核心功能实测与免费版差异全解析 在数字内容创作领域&#xff0c;AI视频工具正掀起一场革命。作为行业新锐&#xff0c;d-id AI studio凭借其独特的面部动画技术&#xff0c;让普通用户也能轻松制作专业级动态视频。但对于已经体验…...

PyFluent:重构CFD仿真流程的技术赋能与效能跃迁

PyFluent&#xff1a;重构CFD仿真流程的技术赋能与效能跃迁 【免费下载链接】pyfluent 项目地址: https://gitcode.com/gh_mirrors/pyf/pyfluent 在现代工程仿真领域&#xff0c;计算流体动力学&#xff08;CFD&#xff09;技术正经历着从手动操作向自动化流程的深刻转…...

3000 字深度拆解:Paperxie AI 期刊写作界面全解析 —— 科研人必看的 “投刊效率密码”

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/期刊论文https://www.paperxie.cn/ai/journalArticleshttps://www.paperxie.cn/ai/journalArticles 一、引言&#xff1a;科研人的投稿困局&#xff0c;藏在每一个被忽略的界面细节里 当科研人熬过无数个深…...

AI巨头集体“铸Token”:从ChatGPT到“数字员工工厂”,程序员的狂欢还是危机?

想象一下&#xff1a;你早上醒来&#xff0c;打开电脑&#xff0c;不是自己敲代码&#xff0c;而是对着一只“龙虾”说&#xff1a;“帮我把昨天的Bug修了&#xff0c;顺便给老板发份周报。” 这不是科幻——2026年3月&#xff0c;这事儿正在发生。 全球头部科技公司突然集体“…...

VitePress 博客主题定制与美化实战

1. VitePress主题美化的核心思路 很多开发者在使用VitePress搭建博客时&#xff0c;都会遇到一个共同的问题&#xff1a;默认主题虽然简洁&#xff0c;但缺乏个性。我在实际项目中发现&#xff0c;通过CSS变量覆盖、自定义组件和插件扩展这三个维度&#xff0c;可以打造出极具辨…...

Docker Compose 多服务编排实战:从零搭建微服务架构

Docker Compose 多服务编排实战&#xff1a;从零搭建微服务架构 目录 为什么需要 Docker Compose&#xff1f;实战项目架构环境准备核心服务搭建高级特性&#xff1a;负载均衡与服务发现日志集中管理&#xff08;EFK 栈&#xff09;生产环境最佳实践常见问题排查 为什么需要 …...

热门编程语言全攻略:从入门到职业选手

目录 引言&#xff1a;为什么选择一门“热门”编程语言 1.1 编程语言热度背后的产业逻辑 1.2 初学者如何选择第一门语言 1.3 全栈/进阶者如何扩展技术栈 Python&#xff1a;万能胶水与人工智能首选 2.1 语言定位与核心应用领域 2.2 语法特点&#xff1a;简洁优雅的伪代码 2.3 学…...

Qwen3.5-4B-Claude-Opus企业实操:数据治理元数据血缘关系推理补全工具

Qwen3.5-4B-Claude-Opus企业实操&#xff1a;数据治理元数据血缘关系推理补全工具 1. 平台概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B架构的推理蒸馏模型&#xff0c;专门针对企业级数据治理场景中的元数据血缘关系分析任务进行了优化。该模…...