Vue 自定义ElementUI的Loading效果

import {  loadingText, messageDuration } from "@/settings";import { Loading } from "element-ui";
// loadingText、messageDuration 这两个参数我是调的公共配置文件,按自己需求来 
const install = (Vue, opts = {}) => {/* 全局多彩Loading加载层 */Vue.prototype.$baseColorfullLoading = (index, text, callback) => {let loading;if (!index) {loading = Loading.service({lock: true,  // 是否锁屏text: text || loadingText, // 加载动画的文字spinner: "dots-loader",  // 引入的loading图标background: "hsla(0,0%,100%,.8)", // 背景颜色});} else {switch (index) {case 1:index = "dots";break;case 2:index = "gauge";break;case 3:index = "inner-circles";break;case 4:index = "plus";break;}loading = Loading.service({lock: true,  // 是否锁屏text: text || loadingText, // 加载动画的文字spinner: index + "-loader", // 引入的loading图标background: "hsla(0,0%,100%,.8)", // 背景颜色target: document.querySelector('.app-main-container'),  // **需要遮罩的区域// (我这里是指要求遮盖组件,如果你想全屏遮盖住,可以不要这行代码)});}if (callback) {callback(loading);} else {setTimeout(() => {loading.close();}, messageDuration);}};};if (typeof window !== "undefined" && window.Vue) {install(window.Vue);
}export default install;

调用

  // index可以填写1-4,4种效果this.$baseColorfullLoading(3)

在这里插入图片描述

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

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

相关文章

cpolar:通过脚本自动更新主机名称和端口号进行内网穿透【免费版】

cpolar 的免费版经常会重新分配 HostName 和 Port,总是手动修改太过麻烦,分享一下自动更新配置文件并进行内网穿透的方法。 文章目录 配置 ssh config编写脚本获取 csrf_token打开登陆界面SafariChrome 设置别名 假设你已经配置好了服务器端的 cpolar。 …

Spring AI 调用 openAI 进行语音识别

Spring AI支持语音识别功能,目前仅支持OpenAI的Transcription模型。 项目搭建: 参考 Spring AI 介绍以及与 Spring Boot 项目整合 源码示例: RestController RequestMapping("/openai") public class OpenAiIAudioTranscriptionC…

1964springboot VUE 智慧社区可视化平台系统开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot VUE社区可视化平台系统是一套完善的完整信息管理类型系统,结合springboot框架和VUE完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发),系统具有完整的源代码…

Android Studio main,xml 视图代码转换

Android Studio main,xml 视图&&代码转换 其实很简单,但是对我们小白来说还是比较蒙的。 废话不多说,直接上图。 我的Android Studio 是 4.0 版的 我刚打开是这个界面,在我想学习如何用代码来布局,可能大家也会找不见代码的位置。 follow me 是不是感觉很简单呢。…

394. 字符串解码

394. 字符串解码 题目链接&#xff1a;394. 字符串解码 代码如下&#xff1a; class Solution { public:string decodeString(string s) {stack<string> strs; stack<int> nums; int num0;string res;for(int i0;i<s.size();i){if(s[i]>1&&s[i]…

应用安全.

模糊测试是一种黑盒测试技术&#xff0c;它将大量的畸形数据输入到目标程序中&#xff0c;通过监测程序的异常来发现被测程序中可能存在的安全漏洞。模糊测试不需要程序的源代码就可以发现问题&#xff0c;是一种自动化的动态漏洞挖掘技术&#xff0c;不存在误报&#xff0c;也…

【usb设备端口异常】——使用ls /dev/video*查看设备号时出现报错:ls:无法访问‘/dev/video*‘: 没有那个文件或目录

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、ls:无法访问/dev/video*: 没有那个文件或目录1. 问题描述2. 原因分析3. 解决方法 总结 前言 一、ls:无法访问’/dev/video*: 没有那个文件或目录 使用的这…

21、24年--项目管理概论——项目经理的角色

1、项目经理的定义 项目经理的角色不同于职能经理或运营经理。一般而言,职能经理专注于对某个职能流域或业务部门的而管理监督。运营经理负责保证业务运营的高效性。项目经理则由执行组织委派,负责领导团队实现项目目标。 2、项目经理的影响力范围 2.1 概述 项目经理…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 披萨大作战(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

《梦醒蝶飞:释放Excel函数与公式的力量》4.1if函数

第4章&#xff1a;逻辑与条件函数 第一节4.1 if函数 在Excel中&#xff0c;逻辑函数用于处理基于特定条件的真假判断&#xff0c;它们是构建复杂公式和进行高级数据分析的基础。本章将深入探讨逻辑函数的使用方法&#xff0c;特别是IF函数&#xff0c;这是Excel中最为常用的条…

1 UC

1 UC 1、环境变量2、环境变量表3、错误处理4、库文件4.1 静态库4.2 动态库4.3 动态库的动态加载 5、虚拟地址 1、环境变量 什么是环境变量&#xff1f; 每个进程都有一张自己的环境变量表&#xff0c;表中的每个条目都是形如“键值”形式的环境变量。进程可以通过环境变量访问…

Lua 变量

Lua 变量 Lua 是一种轻量级的编程语言,广泛用于游戏开发、脚本编写和其他应用程序中。在 Lua 中,变量是用来存储数据值的标识符。本文将详细介绍 Lua 中的变量,包括变量的类型、声明、赋值和使用方法。 变量类型 Lua 是一种动态类型语言,这意味着变量不需要显式声明类型…

计算机毕业设计Python深度学习房价预测 房价可视化 链家爬虫 房源爬虫 房源可视化 卷积神经网络 大数据毕业设计 机器学习 人工智能 AI

基于python一/二手房数据爬虫分析预测系统可视化 商品房数据Flask框架&#xff08;附源码&#xff09; 项目介绍python语言、Flask框架、MySQL数据库、Echarts可视化 sklearn机器学习 多元线性回归预测模型、requests爬虫框架 链家一手房 一手房数据商品房数据、分析可视化预测…

前后端分离的后台管理系统源码,快速开发OA、CMS网站后台管理、毕业设计项目

那有没有一款软件解-决这种现状呢?答案是肯定的。引入我们的软件——eladmin。 介绍 ELADMIN,一个简单且易上手的 Spring boot 后台管理框架,已发布 Mybatis-Plus 版本,为开发者提供了一个全-面、高-效的解-决方案。 特点 高-效率:前后端完全分离,项目简单可配,内置代码…

在windows和linux服务器之间互传文件

最近需要在windows上和linux服务器上实现相互传送文件&#xff0c;作为一个linux小白&#xff0c;研究了一个上午&#xff0c;终于成功了&#xff0c;记录一下。 使用的是SFTP方式。 Linux服务器系统是 Ubuntu 18.04 64位&#xff0c;windows 是 win10专业版。 首先在Linux服…

DevOps搭建-安装Maven

在进行DevOps搭建时&#xff0c;安装Maven是非常常见的步骤&#xff0c;因为Maven是Java项目管理和构建工具&#xff0c;用于管理项目依赖、构建项目和生成部署包。以下是安装Maven的详细步骤&#xff1a; 下载Maven安装包&#xff1a; 访问Apache Maven官方网站&#xff0c;…

http和https的区别在哪

HTTP&#xff08;超文本传输协议&#xff09;和HTTPS&#xff08;超文本传输安全协议&#xff09;之间存在几个关键区别主要涉及安全性、端口、成本、加密方式、搜索引擎优化&#xff08;SEO&#xff09;、身份验证等方面 1、安全性&#xff1a;HTTP&#xff08;超文本传输协议…

嵌入式综合实验

实验器材 stm32f103c8t6,stlink 实验目的 综合使用实验开发板上的四个led和usart串口&#xff0c;结合前面学习的gpio、定时器、usart等知识&#xff0c;设计综合实验 实验内容 实现功能&#xff1a;上位机通过usart通信控制由定时器中断驱动的led灯切换不同闪烁模式&…

每天一个数据分析题(三百七十九)- 用户留存

某公司为更好进行用户留存&#xff0c;需建立用户行为画像&#xff0c;并且历史数据集中也没有用户标签信息&#xff0c;需要使用算法找出合理的画像标签&#xff0c;可用以下哪种算法实现&#xff1f; A. 聚类算法 B. 多元线性回归算法 C. 决策树算法 D. 朴素贝叶斯算法 …

基于Python的自然语言处理项目 ChatTTS 推荐

**项目名称&#xff1a;ChatTTS**  ChatTTS是一个基于Python的自然语言处理项目&#xff0c;旨在实现一个简单的文本到语音转换系统。它使用深度学习技术&#xff0c;通过自然语言处理和语音合成算法&#xff0c;将文本转换为语音输出。  **项目介绍**&#xff1a;  Chat…