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 手写 动态加载组件
效果展示 一、需求背景: # vue3 项目涉及很多图表加载、表格加载 #考虑手写一个动态加载组件 二、实现思路 通过一个加载状态变量,通过v-if判断,加载状态的变量等于哪一个,动态加载组件内部就显示的哪一块组件。 三、实现效果…...
HTML:表单
目录 案例: 一、form标签 二、input标签 三、textarea标签 四、select标签 五、fieldset 标签 案例: <!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团队主导的项目,定位为: 在Plonky2 SNARK中验证Plonky3 STARK proof。 从而实现Plonky系列的递归证明。 开源代码实现见: https://github.com/QEDProtocol/plonky2.5https://github.com/Plonky3/Plonky3&a…...
卷积通用模型的剪枝、蒸馏---剪枝篇(此处以deeplabv3+为例,可根据模型自行定制剪枝层)
之后的两篇文章是对前段时间工作的一个总结。 一、环境配置 1.1、文章以b导的代码为模板,环境配置比较简单(第二篇蒸馏篇结束后会放置剪枝蒸馏配置好的百度网盘链接),其他算法自行配置,在剪枝之前,需要保证算法能够在本地跑通。 B导链接: https://github.com/bubbliiiin…...
使用Ollama在本地运行AI大模型gemma
1.下载: https://github.com/ollama/ollama/releases 2.配置环境变量 我的电脑-右键-属性-系统-高级系统设置-环境变量-【系统环境变量】新建 变量名:OLLAMA_MODELS (固定变量名) 变量值:E:\Ollama\Lib ࿰…...
【IC前端虚拟项目】时序面积优化与综合代码出版本交付
【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 到目前为止,我们完成了第一版综合,那么就可以打开报告看一下了,一看就会发现在1GHz时钟下时序真的很差(毕竟虚拟项目里使用的工艺库还是比较旧的,如果用12nm、7mn会好很多): Timing Path Group cl…...
windows版本-idea中下载的java版本在哪
1、点击idea的file-projectStructure 进入: 通过电脑目录进入该目录 找到bin目录,copy该目录地址 copy下来之后设置到系统环境变量中...
设计模式:创建者模式
定义 创建者模式(Builder Pattern),又称建造者模式,是一种创建型设计模式,它提供了一种创建对象的最佳方式。该模式允许将一个复杂对象的构建与它的表示分离,这样同样的构建过程可以创建不同的表示。创建者…...
【linux】基础IO(四)
在上一篇基础IO中我们主要讲述了文件再磁盘中的存储,当然我们说的也都只是预备知识,为这一篇的文件系统进行铺垫。 目录 搭文件系统的架子:填补细节:inode:datablock[]: 更上层的理解: 搭文件系统的架子&a…...
集合框架(数组,Arrays.sort,list,map,set,stack,queue)蓝桥杯习题
前言(基本知识) List集合 有序,接口, List<引用数据类型> listnew ArrayList<>(); 方法: add() size() get()//索引index从0开始,返回对应的值 isEmpty()判断是否包含该元素,不包含返回true,包含返…...
【C++基础】运算符和流程控制语句
C中的运算符和流程控制语句 一、运算符1. C和Java在通用运算符中的不同之处对比2. C中的位运算符2.1 移位运算符2.2 位逻辑运算符 3. 运算时的类型转换总结3.1 隐式类型转换3.2 显式类型转换(强制类型转换) 4. 注意 二、流程控制语句1. C和Java在通用流程…...
AOF文件重写
1.2.3.AOF文件重写 因为是记录命令,AOF文件会比RDB文件大的多。而且AOF会记录对同一个key的多次写操作,但只有最后一次写操作才有意义。通过执行bgrewriteaof命令,可以让AOF文件执行重写功能,用最少的命令达到相同效果。 如图&am…...
第四次面试总结 — 嘉和智能 - 全栈开发
🧸欢迎来到dream_ready的博客,📜相信您对专栏 “本人真实面经” 很感兴趣o (ˉ▽ˉ;) 专栏 —— 本人真实面经,更多真实面试经验,中大厂面试总结等您挖掘 目录 总结(非详细) 面试内…...
tx-lcn使用
tx-lcn是啥 tx-lcn是一个分布式事务框架,有两个模块组成管理端(server)和client端。 管理端用于分布式事务的注册,事务消息接收,事务消息下发等管理工作。 client端包括事务发起方,事务参与方。 LCN名称是…...
oracle恢复异常处理
问题现象: 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
🔥博客主页:fly in the sky - CSDN博客 🚀欢迎各位:点赞👍收藏⭐️留言✍️🚀 🎆慢品人间烟火色,闲观万事岁月长🎆 📖希望我写的博客对你有所帮助,如有不足,请指正&#…...
备战蓝桥杯(java)(日益更新)
备战蓝桥杯(java)(日益更新) 文章目录 备战蓝桥杯(java)(日益更新)前言:一、c 到 java 须要注意的地方:二、多练java代码:(用java代码…...
06 Php学习:字符串
PHP 中的字符串变量 在 PHP 中,字符串是一种常见的数据类型,用于存储文本数据。字符串变量可以包含字母、数字、符号等字符,并且可以进行各种操作和处理。以下是关于 PHP 中字符串变量的一些重要信息: 定义字符串变量࿱…...
python画图Matplotlib和Seaborn
python画图Matplotlib和Season 一、Matplotlib1、介绍2、安装3、内容二、Seaborn1、介绍2、安装3、内容一、Matplotlib Matplotlib官网 1、介绍 Matplotlib 是一个 Python 的绘图库,用于创建高质量的二维图表和一些基本的三维图表。它广泛应用于科学计算、数据分析、工程学和…...
低功耗电源开关电路设计与MCU控制实现
1. 经典电源开关电路设计与分析1.1 系统架构概述该电源开关电路采用三级晶体管控制架构,实现以下核心功能:低功耗待机模式(静态电流<10μA)按键触发启动机制MCU控制的自锁功能软件可控的电源关断系统工作电压为9V输入ÿ…...
MxRadioRF2xx库:ARM Mbed平台RF2xx射频驱动开发指南
1. MxRadioRF2xx 库概述 MxRadioRF2xx 是一个专为 ARM Mbed OS 平台设计的 Atmel(现 Microchip)RF2xx 系列射频收发器驱动库。该库并非对底层寄存器操作的简单封装,而是面向嵌入式无线应用开发者的工程化抽象层,其核心目标是&…...
STM32实现智能酒驾监测系统设计
基于STM32的酒后驾车监测报警系统设计与实现1. 项目概述1.1 系统背景酒后驾车是全球交通事故的主要诱因之一,传统的人工检测方法存在效率低、覆盖范围有限等问题。随着嵌入式系统和物联网技术的发展,智能化的酒精监测系统成为解决这一问题的有效方案。1.…...
软件测试生命周期全解析:用考试答题逻辑,零基础吃透测试核心
之前我们用考场答题的类比,轻松搞懂了软件开发生命周期,很多初学者恍然大悟:原来编程就是一场有章法的“考试”。但一场考试能不能拿到高分、能不能符合出题人(客户)的要求,光靠埋头答题(开发编…...
亚马逊爆款选品:数据采集与三方服务商对接
一、核心选品数据采集渠道1. 官方免费数据源(合规权威)BSR畅销榜:查看类目热销品,定位头部爆款。新品榜:挖掘增速快、潜力大的新品。商机探测器:卖家后台直达,获取高搜索量、低竞争蓝海词。品牌…...
LFM2.5-1.2B-Thinking-GGUF惊艳效果:复杂逻辑推理题(如数理推导)分步求解
LFM2.5-1.2B-Thinking-GGUF惊艳效果:复杂逻辑推理题(如数理推导)分步求解 1. 模型能力概览 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型,专为低资源环境优化设计。这个1.2B参数的模型采用GGUF格式࿰…...
Vue3项目救星:我是如何用Cursor的‘项目规则’功能,让团队新人一天上手的
Vue3团队协作革命:用Cursor项目规则实现代码规范的自动化治理 当新成员加入你的Vue3项目时,是否经历过这样的场景?新人提交的代码里混杂着选项式API和组合式API,路由命名忽而短横线忽而大驼峰,样式文件里散落着各种魔…...
Debian12下Docker国内镜像加速全攻略:以腾讯云为例快速部署WordPress
Debian12下Docker国内镜像加速全攻略:以腾讯云为例快速部署WordPress 在Debian12系统中使用Docker时,国内用户常遇到镜像下载速度慢的问题。本文将详细介绍如何配置国内镜像源加速Docker,并以腾讯云为例,快速部署WordPress环境。…...
【YOLOv11工业级实战】35. DeepStream集成实战——构建高并发视频分析管道
摘要:在智慧交通、智慧工地等工业场景中,多路高清视频的实时分析面临高并发、低延迟、低资源占用的核心诉求。传统PyTorch逐帧推理方案因CPU解码瓶颈、内存拷贝频繁等问题,无法满足500路以上视频流的并发处理需求。本文以NVIDIA DeepStream框架为核心,结合YOLOv11目标检测模…...
3步玩转Balena Etcher:开源镜像烧录工具完全指南
3步玩转Balena Etcher:开源镜像烧录工具完全指南 【免费下载链接】etcher Flash OS images to SD cards & USB drives, safely and easily. 项目地址: https://gitcode.com/GitHub_Trending/et/etcher Balena Etcher是一款开源跨平台镜像烧录工具&#x…...
