html 引用vue3 element 首次加载缩成一团 挤在一起

问题:原生html引用vue,element plus 

分析:

vue.js, element脚本过大,首次加载网络慢的话,会是缩在这里,没完全渲染

解决:

没加载之前,不显示div,显示一个加载提示语

改动地方app先display:none,增加一个loading的div

<div id="loading" style="color: #aeaeae">正在加载,请稍后...</div>
<div id="app" class="common-layout" v-cloak style="display:none">
..
</div>

vue创建的勾子地方,隐藏loading层,显示app

const _app = createApp({
setup(){}created() {document.getElementById("loading").style.display = "none"document.getElementById("app").style.display = "block"},
}_app.use(ElementPlus, {locale: zhCn})_app.component('Delete', ElementPlusIconsVue.Delete)_app.component('camerafilled', ElementPlusIconsVue.CameraFilled)_app.__VUE_PROD_DEVTOOLS__ = trueconst vm = _app.mount('#app')

最终效果

脚本下载之后,就会完整显示app

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/331826.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入探索MySQL SELECT查询:从基础到高级,解锁数据宝藏的密钥

系列文章目录 更新ing... MySQL操作全攻略&#xff1a;库、表、数据、事务全面指南深入探索MySQL SELECT查询&#xff1a;从基础到高级&#xff0c;解锁数据宝藏的密钥MySQL SELECT查询实战&#xff1a;练习题精选&#xff0c;提升你的数据库查询技能PyMySQL&#xff1a;连接P…

urllib_post请求_百度翻译之详细翻译

百度翻译有一个详细翻译的接口&#xff1a; post请求&#xff1a; 请求参数&#xff08;较多&#xff09;&#xff1a; 打印之后&#xff0c;发现有问题&#xff1a; 改一下请求头&#xff1a; 将Accept-Encoding注释掉&#xff0c;因为我们使用的是utf-8编码&#xff1a; 加上…

基于深度学习和去卷积的盲源分离方法在旋转机械上的应用

关键词&#xff1a;预测性维护、盲源分离、振动分析、传递函数移除、二阶循环平稳性、轴承监测、机器学习 振动是旋转机械中主要的故障指示器&#xff0c;它们主要来源于两个方面&#xff1a;一个是与齿轮相关的振动&#xff08;主要源于齿轮啮合过程中的冲击和不平衡负载&…

Python数据分析实验四:数据分析综合应用开发

目录 一、实验目的与要求二、主要实验过程1、加载数据集2、数据预处理3、划分数据集4、创建模型估计器5、模型拟合6、模型性能评估 三、主要程序清单和运行结果四、实验体会 一、实验目的与要求 1、目的&#xff1a; 综合运用所学知识&#xff0c;选取有实际背景的应用问题进行…

el-transfer和el-tree进行结合搞一个树形穿梭框

由于业务需求需要在穿梭框里使用树形结构&#xff0c;但是本身element里并不支持&#xff0c;于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。 目录 1.拷贝代码放到自己的项目目录中 2.改造el-transfer的源码 3.修改tree-transfer-panel.vue文件 4.修改…

MFC GDI 绘图模式、映射模式、画笔、笔、字体

一 GDI 绘图模式&#xff08;RoP2 Mode&#xff09; 在使用VC MFC进行图形程序编程时&#xff0c;常会用到GDI绘图指令&#xff0c;而要做到绘图时有橡皮筋动态效果&#xff0c;就需设置GDI绘图模式。GDI绘图模式有多种&#xff0c;如下&#xff1a; 常用R2_NOT模式来实…

如何修复 System has not been booted with systemd 报错信息?

如何修复 System has not been booted with systemd 报错信息&#xff1f; 一、问题描述&#xff1a; 我们在学习 linux 系统时&#xff0c;使用 systemd 命令&#xff08;比如 sudo systemctl status ssh&#xff09;&#xff0c;可能会遇到一个报错信息&#xff1a; System…

VS2022上通过C++绘图库ROOT库绘制一个3D曲面图

ROOT库提供了强大的交互式图形功能。通过使用ROOT库的TCanvas和TApplication类&#xff0c;可以创建一个交互式的图形窗口&#xff0c;可以对图形进行缩放、平移、旋转等操作&#xff0c;并且可以通过鼠标和键盘与图形进行交互&#xff0c;这点实在是太厉害了&#xff0c;也就是…

Macos14.4 安装MySQL5.7

文章目录 前言一、MySQL介绍二、安装步骤1.下载2.安装3.配置1.进入系统设置2.启动服务3.配置环境变量4.修改密码 FAQ1.双击安装时提示&#xff1a;检测恶意软件&#xff0c;无法打开2.修改环境变量文件提示&#xff1a;readonly option is set (add ! to override)文件权限不足…

QT常量中有换行符

头文件添加&#xff1a; #pragma execution_character_set("utf-8")

Fastjson漏洞之CVE-2017-18349

前言&#xff1a; 要想理解漏洞原理&#xff0c;首先看看Fastjson是什么&#xff0c;具体用来做什么才能更好的找到可以利用的场景&#xff1a; Fastjson 是一个由阿里巴巴开发的 Java 语言实现的高性能 JSON 解析器和生成器。它具有以下特点: 快速&#xff1a;Fastjson 在序列…

接口测试基础

Postman断言 1、Postman断言介绍 l 作用&#xff1a;让Postman工具代替人工 自动判定 预期结果和实际结果是否一致。 2、Postman断言——响应状态码断言 l 模板名称&#xff1a;Status code: Code is 200 l 模板内容&#xff1a; 2、Postman断言——包含指定字符串断言 …

在Linux上面部署ELK

注明&#xff1a;一下的软件需要自己准备 一、准备环境&#xff1a; 1.两台elasticsearch主机4G内存 2.两台elasticsearch配置主机名node1和node2(可以省略) #vim /etc/hostname #reboot 3. 两台elasticsearch配置hosts文件 #vim /etc/hosts 192.168.1.1 node1 192…

安卓开发:相机水印设置

1.更新水印 DecimalFormat DF new DecimalFormat("#"); DecimalFormat DF1 new DecimalFormat("#.#");LocationManager LM (LocationManager)getSystemService(Context.LOCATION_SERVICE); LM.requestLocationUpdates(LocationManager.GPS_PROVIDER, 2…

《欢乐钓鱼大师》辅助:新手钓鱼全新攻略大全!

《欢乐钓鱼大师》是一款充满趣味和挑战的钓鱼游戏。在游戏中&#xff0c;玩家不仅可以体验钓鱼的乐趣&#xff0c;还可以通过不同的钓鱼竿和鱼卡来提升自己的钓鱼技能。为了帮助新手和老玩家更好地体验游戏&#xff0c;本文将为您提供详细的游戏攻略。 1. 游戏目标 在《欢乐钓…

一个人应该怎么操作抖音小店呢?店铺操作流程给你讲解清楚!

大家好&#xff0c;我是电商小V 现在入驻抖音小店的有很多新手&#xff0c;新手最关心的就是一个人应该如何操作抖音小店&#xff0c;操作抖音小店需要做好哪几步呢&#xff1f;关于这个问题咱们就来详细的讲解一下&#xff0c; 第一点&#xff1a;开店 开店是做店的第一步&…

【资讯】5月巴塞罗那,东胜物联边缘计算网关亮相IOTSWC AWS展台

2024年5月21-23日&#xff0c;物联网解决方案世界大会 IOT SWC 在巴塞罗那举行&#xff0c;这是数字化转型趋势和颠覆性技术的顶级盛会。 作为AWS的硬件合作伙伴&#xff0c;东胜物联网边缘计算网关DSGW-210将在AWS展台1号馆展出&#xff0c;欢迎大家前来参观。 此次东胜在AW…

FPGA之tcp/udp

在调试以太网的过程中&#xff0c;考虑了vivado IP配置(管脚、reset等)&#xff0c;SDK中PHY芯片的配置(芯片地址、自适应速率配置等)&#xff0c;但是&#xff0c;唯独忽略了tcp/udp协议&#xff0c;所以在ping通之后仍无法连接。 所以现在来学习一下tcp与udp的区别 ---- 为什…

.NET 一款内部最新的免杀WebShell

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…