工程化:vite4和vue3里面的命令式loading的封装及使用

news2024/9/21 22:57:42

用习惯了vue的组件使用方式，转到vue3里面发现没有了vue的原型，不能全局挂载方法了，我们要使用命令式调用组件该怎么做，

效果展示

请添加图片描述

代码演练

1.组件结构
在这里插入图片描述
2.基础的组件模板loading.vue

<template>
  <section
    class="full-loading"
    :class

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java 诊断神器：Arthas

Java 诊断神器：Arthas

Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法执行耗时&#xff0c;类加载信…
阅读更多...
SpringBoot【开发实用篇】---- 测试

SpringBoot【开发实用篇】---- 测试

SpringBoot【开发实用篇】---- 测试 1. 加载测试专用属性2. 加载测试专用配置3. Web环境模拟测试4. 数据层测试回滚5. 测试数据用例设定 说完bean配置相关的内容&#xff0c;下面要对前面讲过的一个知识做加强了&#xff0c;测试。测试是保障程序正确性的唯一屏障&#xff0c;在…
阅读更多...
ubuntu重启ssh服务

ubuntu重启ssh服务

一、开启ssh服务首先需要安装打开ssh服务的库&#xff1a; sudo apt-get install openssh-server 二、检查当前的ssh开启情况&#xff1a; ps -e |grep ssh 三、如果有sshd&#xff0c;则ssh-server已经启动&#xff1b;若仅有agent&#xff0c;则尚未启动&#xff1b; 开启ssh…
阅读更多...
宝塔面板Nginx防火墙安装

宝塔面板Nginx防火墙安装

宝塔防火墙作用 要让你的网站保持持久的安全和稳定&#xff0c;开启网站防火墙是必不可少的一步。别等到被攻击的时候再去补救&#xff0c;那个时候某种程度来讲&#xff0c;已经晚了。安装和开启防火墙&#xff0c;就是防患于未然。未雨绸缪。最大程度保护好你的云服务器和网站…
阅读更多...
JAVAWeb11-服务器渲染技术 -JSP-03-JSTL（会使用）

JAVAWeb11-服务器渲染技术 -JSP-03-JSTL（会使用）

1. JSTL 标签库介绍 JSTL 标签库 是指 JSP Standard Tag Library &#xff1a;JSP 标准标签库EL 表达式是为了替换 jsp 中的表达式脚本&#xff0c;JSTL 是为了替换代码脚本。这样 jsp 页面变得更佳简洁JSTL 由五个标签库组成 使用 JSTL&#xff0c;需要导入相关的 jar 包 2…
阅读更多...
一文读懂：客户管理系统平台是什么？有什么作用？

一文读懂：客户管理系统平台是什么？有什么作用？

“客户管理系统平台是什么&#xff1f;” “客户管理系统平台有什么作用&#xff1f;在哪里可以应用&#xff1f;怎么用&#xff1f;” 经常可以听到企业内部关于客户管理系统平台的这些问题&#xff0c;本文将会为您一一解答&#xff1a; 一、客户管理系统平台是什么 顾名…
阅读更多...
远程桌面连接Windows Server，提示“你的远程桌面服务会话已结束，可能是下列原因之一”错误

远程桌面连接Windows Server，提示“你的远程桌面服务会话已结束，可能是下列原因之一”错误

1、错误描述如下&#xff1a; 2、问题原因 出现该问题可能有以下原因&#xff1a; Windows实例的系统盘无Users用户&#xff0c;您可以参考方案一&#xff1a;添加Users用户修复该问题。 Windows实例的系统盘Users用户无读取和执行、列出文件夹内容、读取权限&#xff0c;您…
阅读更多...
python建立字典的方法

python建立字典的方法

在学习 Python的过程中&#xff0c;我们需要用到一些字典类的模块&#xff0c;例如 gdb、 gdtool等&#xff0c;但是这些字典类的模块都是以文件的形式存在。虽然通过 pip等命令也可以进行安装&#xff0c;但是在安装过程中我们需要非常仔细的检查安装包是否正确&#xff0c;以…
阅读更多...
03FPGA—led灯的显示（入门）

03FPGA—led灯的显示（入门）

学习fpga也有段时间了&#xff0c;但后台有几个朋友问我能不能分享一点简单入门例子&#xff0c;于是我打算发经典的如何控制led的例子,本文主要分享设计流程以及简单的verilog语法。 设计流程主要包括五个步骤模块设计、波形设计、编写rtl代码、仿真验证、上板验证&#xff0c…
阅读更多...
Windows编程资源，菜单资源，图标资源，光标资源，上下文菜单，字符串资源，加速键资源

Windows编程资源，菜单资源，图标资源，光标资源，上下文菜单，字符串资源，加速键资源

Windows资源是一种二进制数据&#xff0c;由链接器链接进程序成为程序的一部分&#xff0c;通过资源的方式可以很方便的对应用程序进行扩展。在Windows中资源可以是系统自定义的&#xff0c;也可以是用户自定义的。在本篇文章中为大家讲解菜单资源&#xff0c;上下文菜单&#…
阅读更多...
【LeetCode】617. 合并二叉树

【LeetCode】617. 合并二叉树

1.问题 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff09;。你需要将这两棵树合并成一棵新二叉树。合并的规则是&#xff1a;如果两个节点重…
阅读更多...
Win11系统更新后网络速度变的很慢怎么办？

Win11系统更新后网络速度变的很慢怎么办？

Win11系统更新后网络速度变的很慢怎么办&#xff1f;有用户将自己的电脑系统升级到了Win11之后&#xff0c;出现了一些问题。电脑在使用中出现了网络速度变慢的情况。而且其它的设备在连接网络后速度是正常的&#xff0c;那么这个问题要怎么解决&#xff1f;来看看以下的方法分…
阅读更多...
SpringBoot+RXTXcomm实现Java串口通信 读取串口数据以及发送数据

SpringBoot+RXTXcomm实现Java串口通信 读取串口数据以及发送数据

记录一下使用SpringBootRXTXcomm实现Java串口通信&#xff0c;使用Java语言开发串口&#xff0c;对串口进行读写操作。 RXTXcomm.jar这个包支持的系统较多&#xff0c;但是更新太慢&#xff0c;在win系统下使用没有问题&#xff0c;但是在centos的工控机系统里使用读取和发送有…
阅读更多...
vmstat 粗查系统判断瓶颈

vmstat 粗查系统判断瓶颈

vmstat 1 5 每 1 秒显示一次 &#xff0c; 一共显示 5 次后结束 memory 内存 swap 虚拟磁盘&#xff0c;交换分区 io 磁盘 system 系统进程 rrun 多少个进程在跑&#xff0c;包括在排队等待cpu处理的进程b block 多少个进程处于卡死状态。 除CPU外的资源如网络、…
阅读更多...
视频播放方案

视频播放方案

video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放。 使用了包括video.min.js库和HLS插件。 1-基础使用 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>Video.js HLS Example</title…
阅读更多...
MYSQL高级语句

MYSQL高级语句

实验用表 create table location (Region char(20),Store_Name char(20)); insert into location values(East,Boston); insert into location values(East,New York); insert into location values(West,Los Angeles); insert into location values(West,Houston); location…
阅读更多...
如何解决请求参数为JSON时，采用IO流读取，只能请求一次的问题？

如何解决请求参数为JSON时，采用IO流读取，只能请求一次的问题？

如何解决请求参数为JSON时&#xff0c;采用IO流读取&#xff0c;只能请求一次的问题&#xff1f; 一、错误演示1. 创建项目&#xff0c;添加所需依赖2. 配置redis环境3. 写一个简单的测试请求4. 写一个拦截器&#xff0c;拦截请求5. WebConfig 注册拦截器6. 测试请求 二、问题解…
阅读更多...
vue问题

vue问题

一、路由 hash模式&#xff08;location.hash hashchange 事件&#xff09; hash 模式的实现方式就是通过监听 URL 中的 hash 部分的变化&#xff0c;触发haschange事件&#xff0c;页面做出不同的响应。但是 hash 模式下&#xff0c;URL 中会带有 #&#xff0c;不太美观。 h…
阅读更多...
【多线程初阶三】简单了解wait和notify方法~

【多线程初阶三】简单了解wait和notify方法~

目录 &#x1f31f;1、wait() &#x1f31f;2、notify() &#x1f31f;1、wait() &#xff08;1&#xff09;wait()方法与notify()方法都是Object类中的方法。 &#xff08;2&#xff09;wait()是让线程等待一段时间&#xff0c;死等——>状态WAITING:没有时间限制的等待.…
阅读更多...
MySQL 高级(进阶) SQL 语句一

MySQL 高级(进阶) SQL 语句一

一、高级SQL语句&#xff08;进阶查询&#xff09; 先准备2个表 一个location表&#xff1a; use kgc; create table location (Region char(20),Store_Name char(20)); insert into location values(East,Boston); insert into location values(East,New York); insert int…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023