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

vue3+vite全局loading

news 来源：原创 2025/5/19 14:15:23

vue3+vite全局loading

j-loading.vue组件

<template><transition enter-active-class="animate__animated animate__fadeIn"leave-active-class="animate__animated animate__fadeOut"><div class="root-box" v-if="show"><div class="wrap"><img src="../../assets/img/loading.gif"/></div></div></transition>
</template><script setup>
import {ref} from "vue"
const show = ref(false)const showLoading = () => {show.value = true
}
const hideLoading = (callback) => {show.value = falsecallback && setTimeout(() => callback(), 500)
}defineExpose({show,showLoading,hideLoading
})
//指令使用
// v-jwq-loading="jLoading"//函数使用
// import {getCurrentInstance} from 'vue'
// // 获取当前实例
// const {proxy} = getCurrentInstance()
// 全局显示自定义loading
// const showJwqLoading = () => {
//   proxy.$showLoading()
//   setTimeout(() => {
//     proxy.$hideLoading()
//   }, 2000)
// }
</script><style scoped lang="scss">
.animate__animated.animate__fadeIn {--animate-duration: 0.5s;
}.animate__animated.animate__fadeOut {--animate-duration: 0.5s;
}.root-box {position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: 0;background-color: rgba(255, 255, 255, 0.9);z-index: 2000;display: flex;justify-content: center;align-items: center;.wrap {width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;overflow: hidden;img {width: 100%;//transform: scale(2.5);}}
}
</style>

jLoadding.js

import {createVNode, render, cloneVNode} from "vue"
import jLoading from "./j-loading.vue"export default {install(app) {// 使用vue底层的createVNode方法将组件渲染为虚拟节点const VNode = createVNode(jLoading)// 使用render函数将组件挂载到body中render(VNode, document.body)// 定义全局方法设置组件的显示和隐藏app.config.globalProperties.$showLoading = VNode.component.exposed.showLoadingapp.config.globalProperties.$hideLoading = VNode.component.exposed.hideLoadingconst weakMap = new WeakMap()// 自定义Loading指令app.directive("jwq-loading", {mounted(el) {if (weakMap.get(el)) return//  记录当前绑定元素的positionweakMap.set(el, window.getComputedStyle(el).position)},updated(el, binding) {const oldPosition = weakMap.get(el);// 如果不是position: relative或者absolute，就设置为relative// 这里的目的是确保loading组件正确覆盖当前绑定的元素if (oldPosition !== 'absolute' && oldPosition !== 'relative') {el.style.position = 'relative'}// 克隆一份loading元素,// 作用是当页面上有多个zx-loading时，每个dom都维护一份属于自己的loading，不会冲突const newVNode = cloneVNode(VNode)// 挂载当前节点render(newVNode, el)// 判断绑定的值if (binding.value) {newVNode.component.exposed.showLoading()} else {newVNode.component.exposed.hideLoading(() => {// 还原布局方式el.style.position = oldPosition})}}})}
}

main.js

import jLoading from "./components/j-loading/jLoading.js"
// 引入自定义的全局Loading
app.use(jLoading)

全局设置请求

import jLoading from "@/components/j-loading/j-loading.vue"
import {createVNode, render} from "vue";
const VNode = createVNode(jLoading)
// 使用render函数将组件挂载到body中
render(VNode, document.body)
//开启加载
const showLoading=()=>{VNode.component.exposed.showLoading()
}
//关闭加载
const hideLoading=()=>{VNode.component.exposed.hideLoading()
}
//如get请求演示
/*** 封装get方法* @param url* @param data* @returns {Promise}*/export function get(url, params = {}) {return new Promise((resolve, reject) => {showLoading()//开启loadingaxios.get(url, {params: params}).then(response => {hideLoading()//关闭loadingresolve(response);}).catch(err => {reject(err)})})
}

vue3+vite全局loading

vue3vite全局loading j-loading.vue组件 <template><transition enter-active-class"animate__animated animate__fadeIn"leave-active-class"animate__animated animate__fadeOut"><div class"root-box" v-if"show"…...

编程日记 2025/5/19 14:15:23

比亚迪发布智能化战略，天神之眼开创全民智驾

2月10日，比亚迪在深圳隆重召开智能化战略发布会，正式向全球发布了其最新的智驾技术——“天神之眼”。这一技术的发布，标志着比亚迪在智能驾驶领域迈出了坚实的一步，稳居行业第一梯队，真正实现了端到端的智能驾驶体验&…...

编程日记 2025/5/13 12:57:40

在 MySQL 中，通过存储过程结合条件判断来实现添加表字段时，如果字段已存在则不再重复添加

-- 创建存储过程 DELIMITER $$ CREATE PROCEDURE add_column(IN db_name VARCHAR(255),IN table_name VARCHAR(255),IN column_name VARCHAR(255),IN column_definition VARCHAR(255),IN column_comment VARCHAR(255) ) BEGINDECLARE column_exists INT;-- 检查字段是否存在SEL…...

编程日记 2025/5/17 23:28:30

UP-VLA：具身智体的统一理解与预测模型

25年1月来自清华大学和上海姚期智研究院的论文“UP-VLA: A Unified Understanding and Prediction Model for Embodied Agent”。视觉-语言-动作 (VLA) 模型的最新进展，利用预训练的视觉语言模型 (VLM) 来提高泛化能力。VLM 通常经过视觉语言理解任务的预训练&…...

编程日记 2025/5/17 15:16:17

后端开发ThreadLocal简介

ThreadLocal是线程的局部变量，为每个线程单独提供一份存储空间，具有线程隔离的效果，只有线程内能获取到对应的值客户端发起的每次请求都对应一个单独的线程常用方法 public void set(T value) 设置当前线程局部变量值public T get() 返回…...

编程日记 2025/5/13 21:44:11

AI分支知识之机器学习，深度学习，强化学习的关系

机器学习，深度学习，强化学习的关系这一篇文章我们来探讨下AI领域中机器学习（ML）、深度学习（DL）和强化学习（RL）的关系。一、机器学习（ML）：从数…...

编程日记 2025/5/19 13:23:33

微信小程序案例2——天气微信小程序（学会绑定数据）

文章目录一、项目步骤1 创建一个weather项目2 进入index.wxml、index.js、index.wxss文件，清空所有内容，进入App.json，修改导航栏标题为“中国天气网”。3进入index.wxml，进行当天天气情况的界面布局，包括温度、最低温、最高温、天气情况、城市、星期、风行情况，代码如下…...

编程日记 2025/5/19 12:38:43

CPLD实现SPI通信

在 CPLD 中编写 SPI 程序时，需根据具体需求（主/从设备、时钟极性、数据位宽等）设计逻辑。以下提供一个 SPI 主控制器的 Verilog 实现示例，支持模式 0（CPOL=0, CPHA=0），适用于控制外设（如 ADC、DAC、存储器等）。 SPI 主控制器模块设计（Verilog）模块功能支持 8/16…...

编程日记 2025/5/19 13:49:32

FFmpeg + OpenGL ES 美颜相机教程大纲

做OpenGL和FFmpeg也有很长一段时间了，最近打算结合FFmpegOpenGL ES做一期视频教程，下面是完整视频教程大纲。最终的项目实战效果是实现一款美颜相机。教程分为理论讲解和实战开发两部分，适合有一定编程基础的开发者。课程计划是免费发布在B站…...

编程日记 2025/5/17 17:27:29

dynamic_cast和static_cast和const_cast

dynamic_cast 在 C 中的作用 dynamic_cast 是 C 运行时类型转换（RTTI, Run-Time Type Identification）的一部分，主要用于： 安全的多态类型转换检查类型的有效性向下转换（Downcasting）跨类层次的指针或引用…...

编程日记 2025/5/17 9:33:38

SQLMesh系列教程-2：SQLMesh入门项目实战

假设你已经了解SQLMesh是什么，以及其他应用场景。如果没有，我建议你先阅读《SQLMesh系列教程-1：数据工程师的高效利器-SQLMesh》。在本文中，我们将完成一个小项目或教程，以帮助你开始使用SQLMesh。你可以选择一步一步…...

编程日记 2025/5/18 9:42:21

window 安装GitLab服务器笔记

视频： windows下内网本地部署gitlab 资源： Linux CeneOS7： CentOS7 镜像下载地址 VMware： 虚拟机17.6下载地址安装vim编辑器 yum install vim -y系统环境升级（我第一次没有使用。第二次成功使用了的）…...

编程日记 2025/5/17 17:16:43

【逆向工程】破解unity的安卓apk包

先了解一下普通apk包的逆向方法（无加密或加壳） 开发环境： 操作系统：windows 解apk包下载工具：apktool【Install Guide | Apktool】按照文档说的操作就行，先安装java运行时环境【我安装的是jre-8u441-wind…...

编程日记 2025/5/19 9:59:37

2021版小程序开发5——小程序项目开发实践(2)-完

2021版小程序开发5——小程序项目开发实践(2) 学习笔记 2025 使用uni-app开发一个电商项目继续； 过滤器的使用 filters: {toFixed(num){return Number(num).toFixed(2)} } <view> {{ item.price | toFixed }}</vi…...

编程日记 2025/5/13 4:52:37

Spring Boot牵手Redisson：分布式锁实战秘籍

一、引言在当今的分布式系统架构中，随着业务规模的不断扩大和系统复杂度的日益增加，如何确保多个服务节点之间的数据一致性和操作的原子性成为了一个至关重要的问题。在单机环境下，我们可以轻松地使用线程锁或进程锁来控制对共享资源的访问，但在分布式系统中，由于各个服务…...

编程日记 2025/5/19 13:19:17

【HarmonyOS Next 自定义可拖拽image】

效果图： 代码： import display from "ohos.display" import { AppUtil } from "pura/harmony-utils"/*** 自定义可拖拽图标组件*/ Component export default struct DraggableImage {imageResource?: ResourceimageHeight: numbe…...

编程日记 2025/5/19 13:16:05

基于扑克牌分发效果制作时的问题总结

其基本效果如图 1. 在overlay模式下直接使用position来移动实现代码 public class Card : MonoBehaviour {public RectTransform target;public Button cardButton;private bool isPack false;public List<RectTransform> cards new List<RectTransform>(…...

编程日记 2025/5/19 13:20:41

为多个GitHub账户配置SSH密钥

背景当需要同时使用多个GitHub账户（例如工作和个人账户）时，默认的SSH配置可能导致冲突。本文介绍如何通过生成不同的SSH密钥对并配置SSH客户端来管理多个账户。操作步骤生成SSH密钥对为每个GitHub账户生成独立的密钥对，并指…...

编程日记 2025/5/19 7:29:37

三步本地部署deepseekr1，支持macOs，ubuntu，Windows

一、ollama安装： ollama官网：Ollama Ollama 是一款支持在 Windows、macOS 和 Linux 上本地运行大型语言模型的工具。以下是针对不同操作系统的安装指南： 1、Windows 系统下载安装包：访问 Ollama 官方下载页面，选择适用于 Windows 的安装包进行下载。运行安装程序：下…...

编程日记 2025/5/18 8:42:20

STM32 HAL库 CANbus通讯（C语言）

#include "main.h" #include "stm32f1xx_hal.h"CAN_HandleTypeDef hcan; CAN_TxHeaderTypeDef TxHeader; CAN_RxHeaderTypeDef RxHeader; uint8_t TxData[8]; uint8_t RxData[8]; uint32_t TxMailbox;void CAN_Init(void) {// 使能CAN时钟__HAL_RCC_CAN1_C…...

编程日记 2025/5/19 13:19:18

Cotex-M系列介绍

一、芯片设计公司——ARM ARM公司：只做内核设计和IP授权，不参与芯片设计二、Cortex内核分类及特征...

编程日记 2025/5/19 13:11:53

测试自动化落地方向

一、视觉回归自动化测试（低成本高回报） 痛点： UI 频繁迭代导致视觉问题难覆盖方案： 引入Applitools或SikuliX做视觉比对（无需维护元素定位） 关键路径截图比对，自动检测 UI 错位/样式问题亮点…...

编程日记 2025/5/18 2:16:44

如何通过优化网站结构提高SEO效果？

很多人以为，SEO就是写写关键词，发点外链，但其实，网站结构才是排名的地基！你可以把网站想象成一栋房子，框架没搭好，装饰再漂亮也没用，迟早会塌。同样的道理，如果网站结构混…...

编程日记 2025/5/16 11:56:43

迅雷下载的原理和使用协议的分析

迅雷作为一款广泛使用的下载工具，其核心原理是通过整合多种下载协议和资源分发技术来提升下载速度。以下是对其原理及协议的详细分析： 一、迅雷下载的核心原理多协议混合下载（P2SP） P2SP（Peer-to-Server-Peer&#xf…...

编程日记 2025/5/14 6:27:21

RPA与深度学习结合

什么是RPA RPA即机器人流程自动化（Robotic Process Automation），它是一种利用软件机器人模拟人类在计算机上的操作，按照预设的规则自动执行一系列重复性、规律性任务的技术。这些任务可以包括数据录入、文件处理、报表生成、系统…...

编程日记 2025/5/19 14:00:36

Linux内核模块参数与性能优化：__read_mostly属性的深度剖析

在Linux内核开发中，模块参数和性能优化是两个至关重要的主题。模块参数允许开发者和用户在加载内核模块时动态配置模块的行为，而性能优化则是确保内核高效运行的关键。本文将深入探讨Linux内核中的模块参数机制以及__read_mostly属性的使用，通过实际代码示例和详细解释，帮助…...

编程日记 2025/5/19 13:57:06

Elasticsearch：如何使用 Elastic 检测恶意浏览器扩展

作者：来着 Elastic Aaron Jewitt 当你的 CISO 询问你的任何工作站上是否安装过特定的浏览器扩展时，你多快能得到正确答案？恶意浏览器扩展是一个重大威胁，许多组织无法管理或检测。这篇博文探讨了 Elastic Infosec 团队如何使用 os…...

编程日记 2025/5/19 14:03:39

基于Java的远程视频会议系统(源码+系统+论文)

第一章概述 1.1 本课题的研究背景随着人们对视频和音频信息的需求愈来愈强烈，追求远距离的视音频的同步交互成为新的时尚。近些年来，依托计算机技术、通信技术和网络条件的发展，集音频、视频、图像、文字、数据为一体的多媒体信息&#xff…...

编程日记 2025/5/19 12:56:16

SAP-ABAP:FOR ALL ENTRIES IN用法详解带实例代码

在 SAP ABAP 中，FOR ALL ENTRIES IN 是 SELECT 语句中一个非常常用的功能，用于根据内表中的数据查询数据库表。它的主要作用是将内表中的数据作为查询条件，从数据库表中筛选出符合条件的数据。 1. 基本语法 SELECT <fields>FROM <d…...

编程日记 2025/5/17 17:11:54

构建jdk17包含maven的基础镜像

1、先拉取jdk17基础镜像 docker pull openjdk:17-jdk-alpine 2、使用jdk17基础镜像创建容器 docker run -it openjdk:17-jdk-alpine sh 或 docker run -it --name jdk17 openjdk:17-jdk-alpine sh 3、修改镜像源地址 cat /etc/apk/repositories https://mirrors.aliyun.com…...

编程日记 2025/5/19 13:33:44

【Android】版本和API对应关系表

目录版本和API对应关系表不积跬步，无以至千里；不积小流，无以成江海。要沉下心来，诗和远方的路费真的很贵！ 版本和API对应关系表版本名版本号名称APIAndroid 1616.0W36Android 1515.0V35Android 1414.0U34Android 1…...

编程日记 2025/5/19 7:17:01

Spring Boot 整合 JPA 实现数据持久化

目录前言一、JPA 核心概念与实体映射 1. 什么是 JPA？ 2. JPA 的主要组件 3. 实体映射 4. 常见的字段映射策略二、Repository 接口与自定义查询 1. 什么是 Repository 接口？ 2. 动态查询方法 3. 自定义查询 4. 分页与排序三、实战案例&…...

编程日记 2025/5/18 20:19:40

KUKA 机器人仿真——Simpro4.1和OfficeLite8.6.2 连接实现虚拟示教器

一、准备软件 1、Simpro4.1，是一机一密钥，不好破解，我在某宝买的，省事了。 2、OfficeLite8.6.2，看我的博文的第三步虚拟机内安装OfficeLite8.6.2 KUKA示教器仿真软件OfficeLite8.6.2，EthernetKRL3.1.3通信…...

编程日记 2025/5/18 18:01:45

IntelliJ IDEA使用经验（十三）：使用Git克隆github的开源项目

文章目录问题背景办法1、设置git代理；2、再次克隆项目；3、再次按常规方式进行git克隆即可。问题背景由于github在国外，很多时候我们在使用idea克隆开源项目的时候，没办法检出，提示连接重置。办法 1、设置git代…...

编程日记 2025/5/19 13:35:08

互联网大厂中面试的高频计算机网络问题及详解

前言哈喽各位小伙伴们，本期小梁给大家带来了互联网大厂中计算机网络部分的高频面试题，本文会以通俗易懂的语言以及图解形式描述，希望能给大家的面试带来一点帮助，祝大家offer拿到手软！！！话不多说，我们立刻进入本期正题！一、计算机网络基础部分 1 先来说说计算机网…...

编程日记 2025/5/19 13:26:24

综合实验练习实验报告

一、需求分析 1.防火墙上配置DHCP服务，完成接口配置 2.用户建立以及认证策略建立 3.安全策略建立二、详细配置 DHCP配置 [FW1]dhcp enable [FW1]int g1/0/1.1 [FW1-GigabitEthernet1/0/1.1]dhcp select interface [FW1]int g1/0/1.2 [FW1-GigabitEthernet…...

编程日记 2025/5/18 18:34:30

Ubuntu22.04 配置deepseek知识库

文章目录安装 docker配置 dify配置 ollama创建大模型安装 docker 更新系统：sudo apt update sudo apt upgrade -y安装必要的依赖：sudo apt install apt-transport-https ca-certificates curl software-properties-common -y添加 Docker 的官方 GPG 密…...

编程日记 2025/5/19 10:17:48

如何在WPS和Word/Excel中直接使用DeepSeek功能

以下是将DeepSeek功能集成到WPS中的详细步骤，无需本地部署模型，直接通过官网连接使用：1. 下载并安装OfficeAI插件 （1）访问OfficeAI插件下载地址：OfficeAI助手 - 免费办公智能AI助手, AI写作，下载…...

编程日记 2025/5/18 4:53:09

Mp4视频播放机无法播放视频-批量修改视频分辨率（帧宽、帧高）

背景家人有一台夏新多功能视频播放器（夏新多功能视频播放器），用来播放广场舞。下载了一些广场舞视频，只有部分视频可以播放，其他视频均无法播放，判断应该不是帧速率和数据速率的限制，分析可能是播放器不支持帧高度大于720的视频。由于视频文件较多，需要借助视频编…...

编程日记 2025/5/18 23:01:15

jvm 线程监控调试

文章目录前言一、使用JDK工具转储线程文件（如jstack）1. 找到Java进程的PID：2. 使用jstack生成线程转储文件：3.验证生成的线程转储文件：二、分析文件1.使用在线工具进行分析上传thread-dump文件，等待解析完成2.查看分析结果总结前言提示：使用jdk自带工具转储线程监控文…...

编程日记 2025/5/19 14:02:00

超越 DeepSeek V3 --＞【Qwen2.5-Max】

🔥 先说明，不是广子，不是广子！！！单纯分享这个工具给大家，毕竟最近使用 DeepSeek 太容易崩了，每天深度思考一次之后就开始转圈圈用不了，然后就找到了这个工具使用一、前言…...

编程日记 2025/5/18 22:00:38

301.华为交换机堆叠技术基础

华为交换机堆叠技术基础一、概念及原理部分1.堆叠简介1.1 什么是堆叠1.2 可靠性网络架构1.3 华为堆叠设备1.4 其他厂商的堆叠2.堆叠的示意图3.堆叠的应用3.1 中小企业3.2 园区网4.堆叠的原理4.1基本的概念4.2 堆叠建立4.3 角色选举4.4 版本同步4.5 配置同步4.6 堆叠系统的登录…...

编程日记 2025/5/14 17:18:35

【开源AI】AI一页一页读PDF

【开源AI】AI一页一页读PDF 可以在这里看：让AI 处理 PDF 文件，提取其中的知识点，并生成总结。只是无法修改，后续若有更新在csdn这里。【OpenAI】 API 更新： JSON 结构化输出约束机制（ JSON Schema）的一次实战。知识库的JSON Schema形式每一页都要总结，总结的知识…...

编程日记 2025/5/16 9:22:15

Spring AI 介绍

文章来源：AI 概念 (AI Concepts) _ Spring AI1.0.0-SNAPSHOT中文文档(官方文档中文翻译)|Spring 教程 —— CADN开发者文档中心本节介绍 Spring AI 使用的核心概念。我们建议仔细阅读它，以了解 Spring AI 是如何实现的。模型 AI 模型是旨在处理和生成…...

编程日记 2025/5/18 22:25:08

React - 事件绑定this

在 React 中，this 的绑定是一个常见问题，尤其在类组件中使用事件处理函数时。JavaScript 中的 bind 函数用于设置函数调用时 this 的值。 bind 函数的作用 bind() 方法创建一个新的函数，当被调用时，其 this 关键字被设置为提供的…...

编程日记 2025/5/13 22:02:34

【3.Git与Github的历史和区别】

目录 Git的历史和Github的区别本质和功能 Git的历史和Github的区别 Git是由Linux内核的创造者Linus Torvalds于2005年创建的。当时，Linux内核开源项目使用BitKeeper作为版本控制系统，但2005年BitKeeper的商业公司终止了与Linux社区的合作，收…...

编程日记 2025/5/12 17:54:39

【设计模式】【行为型模式】职责链模式（Chain of Responsibility）

👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 📫 欢迎V： flzjcsg2，我们共同讨论Java深渊的奥秘 &#x1f…...

编程日记 2025/5/16 7:29:43

【算法学习】二分查找开区间写法总结

根据灵神教学中的二分查找开区间写法进行如下总结： 我们需要注意的是，lowerBound 模板求解的是 > target 的最小下标 private int lowerBound(int[] nums, int target) {int left -1;int right nums.length; // 开区间 (left, right)while (left …...

编程日记 2025/5/17 11:53:16

信息科技伦理与道德3-2：智能决策

2.2 智能推荐推荐算法介绍推荐系统：猜你喜欢 https://blog.csdn.net/search_129_hr/article/details/120468187 推荐系统–矩阵分解 https://blog.csdn.net/search_129_hr/article/details/121598087 案例一：YouTube推荐算法向儿童推荐不适宜视频 …...

编程日记 2025/5/18 23:08:29

【干活分享】2025年可以免费问答的一些GPT网站-deepseek等免费gpt

2025年已经到来，大家也都陆续回归到忙碌的工作中。在新的一年里，如何更高效地完成工作任务，提升工作效率，是很多人关心的问题。今天，就为大家分享一些实用性很强的GPT网站，帮助大家在工作中事半功倍。 Dee…...

编程日记 2025/5/17 20:31:38

vue3+vite全局loading

j-loading.vue组件

jLoadding.js

main.js

全局设置请求

相关文章：