【Vue3】自定义 Vue3 插件(全局实现页面加载动画)

news/2024/6/17 6:47:48
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Loading from "./components/Loading/index.ts";const app = createApp(App)
type Lod = {show: () => void,hide: () => void
}
//编写ts loading 声明文件放置报错 和 智能提示
declare module '@vue/runtime-core' {export interface ComponentCustomProperties {$loading: Lod}
}app.use(Loading)
app.mount('#app')
<template>
<!--  App.vue--><div><img id="img" width="400" height="400" src="./assets/unnamed.jpg" alt=""/></div>
</template><script setup lang="ts">
import {getCurrentInstance} from "vue";const instance = getCurrentInstance()
instance?.proxy?.$loading.show()
setTimeout(() => {instance?.proxy?.$loading.hide()
}, 5000)</script><style></style>
// /components/Loading/index.ts
import type {App, VNode} from 'vue'
import {createVNode, render} from "vue";
import Loading from './index.vue'export default {install(app: App) {const Vnode: VNode = createVNode(Loading)render(Vnode, document.body)app.config.globalProperties.$loading = {show: Vnode.component?.exposed?.show,hide: Vnode.component?.exposed?.hide,}}
}
<template>
<!--  components/Loading/index.vue--><div v-if="isShow" class="loading"><div class="loading-content">Loading...</div></div>
</template><script setup lang='ts'>
import { ref } from 'vue';
const isShow = ref(false) //定位loading 的开关const show = () => {isShow.value = true
}
const hide = () => {isShow.value = false
}
//对外暴露 当前组件的属性和方法
defineExpose({isShow,show,hide
})
</script><style scoped lang="less">
.loading {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;&-content {font-size: 30px;color: #fff;}
}
</style>

在这里插入图片描述


http://www.mrgr.cn/p/64613530

相关文章

十八:Java8新特性

文章目录 01、Java8概述02、Java8新特性的好处03、并行流与串行流04、Lambda表达式4.1、Lambda表达式使用举例4.2、Lambda表达式语法的使用14.3、Lambda表达式语法的使用2 05、函数式(Functional)接口5.1、函数式接口的介绍5.2、Java内置的函数式接口介绍及使用举例 06、方法引…

C++类开发的第六篇(虚拟继承实现原理和cl命令的使用的bug修复)

Class_memory 接上一篇末尾虚拟继承的简单介绍之后,这篇来详细讲一下这个内存大小是怎么分配的。 使用cl cl 是 Microsoft Visual Studio 中的 C/C++ 编译器命令。通过在命令行中键入 cl 命令,可以调用 Visual Studio 的编译器进行编译操作。cl 命令提供了各种选项和参数,用…

Unity—MVC分层开发思想

每日一句&#xff1a;当你不努力的时候&#xff0c;天赋就会一点一点被收回 目录 MVC分层开发思想 MVC是什么 MVC的开发步骤 案例&#xff1a;点击按钮实现金币进行添加&#xff0c;并且把金币记录到JSON里 MVC模式实现 背包系统基础代码 背包项目实现步骤 MVC分层开发思…

web自动化——Selenium 之下拉

一、select下拉列表Select类处理select-option1)导入Select类 from selenium.webdriver.support.select import Select2)确保你要操作的元素是select。实例化Select类 Select()3)找到select元素对象 select_ele=driver.find_element(By.NAME,cars)4)将select对象作为参数 s…

Servlet快速入门

注:出自黑马程序员

CentOS的yum报错except OSError, e:

报错信息 Loaded plugins: fastestmirror Loading mirror speeds from cached hostfile base: mirrors.cloud.aliyuncs.comextras: mirrors.cloud.aliyuncs.comupdates: mirrors.cloud.aliyuncs.com File “/usr/libexec/urlgrabber-ext-down”, line 28 except OSError, e: ^…

unity使用Registry类将指定内容写入注册表

遇到一个新需求&#xff0c;在exe执行初期把指定内容写入注册表&#xff0c;Playerprefs固然可以写入&#xff0c;但是小白不知道怎么利用Playerprefs写入DWORD类型的数据&#xff0c;因此使用了Registry类 一. 对注册表中键的访问 注册表中共可分为五类 一般在操作时&#…

Oracle---windows下安装oracle19c

Oracle---windows下安装oracle19c</div><div class="postText"><div id="cnblogs_post_body" class="blogpost-body blogpost-body-html"> 目录: 一. 官网下载oracle19c 以及客户端 二.安装oracle19c 三.配置 1.配置服务 2.配…

oracle11安装及使用

安装oracle11 官网下载地址 Oracle Database 11g Release 2 for Microsoft Windows (x64) 官网下载慢可访问我的资源 也可以网盘获取 链接&#xff1a;https://pan.baidu.com/s/1RDrGkqDA7tfKRnpJXUBMDw 提取码&#xff1a;z3na 上传安装包到服务器 在指定目录下创建文件…

常用日期和时间标准对比:HTML, ISO 8601, RFC 3339, RFC 5322

日期和时间,对于不同系统和平台之间的数据交换和互操作至关重要。本文将对比 HTML 标准、ISO 8601、RFC 3339 和 RFC 5322,为读者提供参考。1. HTML, ISO 8601, RFC 3339, RFC 5322 对比 日期和时间,对于不同系统和平台之间的数据交换和互操作至关重要。本文将对比 HTML 标准…

3.1 IO进程线程

使用fwrite、fread将一张随意的bmp图片&#xff0c;修改成德国的国旗 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> int main(int argc, const char *argv[]) {FILE* fp fopen("./2.bmp","r&quo…

[游戏开发][虚幻5]新建项目注意事项

鼠标右键点击Client.uproject文件&#xff0c;可以看到三个比较关键的选项&#xff0c; 启动游戏&#xff0c;生成sln解决方案&#xff0c;切换引擎版本 断点调试 C代码重要步骤 如果你想断点调试C代码&#xff0c;则必须使用使用代码编译启动引擎&#xff0c;你需要做几个操作…

【李宏毅机器学习2021】(四)Self-attention

引入 Self-attention 前面学到的内容输入都是一个向量,假如输入是一排向量,又应如何处理。来看下有什么例子需要将一排向量输入模型:当输入是一排向量时,输出有三种类型:输入和输出的长度一样,每一个向量对应一个 label,如词性标注、音标识别、节点特性(如会不会买某件…

安装 Ubuntu 22.04.3 和 docker

文章目录 一、安装 Ubuntu 22.04.31. 简介2. 下载地址3. 系统安装4. 系统配置 二、安装 Docker1. 安装 docker2. 安装 docker compose3. 配置 docker 一、安装 Ubuntu 22.04.3 1. 简介 Ubuntu 22.04.3 是Linux操作系统的一个版本。LTS 版本支持周期到2032年。 系统要求双核 C…

【洛谷】闰年

题目描述 很简单,判断给定的年份是不是闰年。 但问题在于我一开始还真不知道闰年的定义..#include<iostream> using namespace std;int main(){int year;cin>>year;if((year%4 == 0 && !(year%100 == 0)) || (year%400 == 0) ){cout<<1;}else{cout&…

综合练习(二)

目录 列出薪金比 SMITH 或 ALLEN 多的所有员工的编号、姓名、部门名称、领导姓名、部门人数&#xff0c;以及所在部门的平均工资、最高和最低工资 补充 spool Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 列出薪金比 SMITH 或 AL…

Python错题集-4:NameError:(变量名错误)

1问题描述 Traceback (most recent call last): File "D:\pycharm\projects\1-可视化学习\8.3更改小提琴图的中位数、均值、颜色等.py", line 8, in <module> violin_parts plt.violinplot(data, showmediansTrue, showmeansTrue) …

【计算机网络】数据链路层——差错控制

差错控制(检错) 差错从何而来? 概括来说,传输中的差错都是由于噪声引起的。 全局性 由于线路本身电气特性所产生的随机噪声(热噪声),是信道固有的,随机存在的。 解决办法:提高信噪比来减少或避免干扰。(对传感器下手) 局部性 外界特定的短暂原因所造成的冲击噪声,是产生差错…

vue3使用elementPlus进行table合并处理

elementPlus中table合并部分列 虚拟数据中公司下有多个客户&#xff0c;公司一样的客户&#xff0c;公司列需要合并&#xff0c;客户如果一样也需要合并进行展示&#xff0c;效果展示 const tableData ref([])自定定义自已想要的数据&#xff0c;一般都是通过接口拿到 //table…

top 命令解释

PID:进程ID USER:运行改进程的用户 PR:进程的优先级 NI:Nice值,进程的优先级修正值,负值表示高优先级,正值表示低优先级 VIRT:虚拟内存,进程使用的虚拟内存总量 RES:物理内存,进程实际使用的物理内存总量 SHR:共享内存,进程实际使用的共享内存总量 S:进程状态,包…