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

// 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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机部署Sentry步骤,国内地址

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

Cesium插件系列——3dtiles压平

本系列为自己基于cesium写的一套插件具体实现。 这里是根据Cesium提供的CustomShader来实现的。 在CustomShader的vertexShaderText里&#xff0c;需要定义vertexMain函数&#xff0c;例如下&#xff1a; struct VertexInput {Attributes attributes;FeatureIds featureIds;…

AcWing 787. 归并排序 解题思路及代码

先贴个题目&#xff1a; 以及原题链接&#xff1a;787. 归并排序 - AcWing题库https://www.acwing.com/problem/content/789/纯板子题&#xff0c;先贴代码吧&#xff0c;根据代码讲思路&#xff1a; #include <iostream> using namespace std;const int N 1e5 10; in…

低密度奇偶校验码LDPC(七)——SPA和积译码算法的简化

一、SPA译码算法的实际应用 查找表与拟合 盒加SPA译码器 二、SPA译码算法的简化算法 最小和算法(MSA) 归一化最小和算法(Normalized MSA, NMSA) 偏移最小和算法(Offset MSA, OMSA) 三、NMSA算法的Matlab实现 function [x_hat, iter_this_time] Layered_NMSA_BP_decoder(ll…

【设计模式】(一)设计模式概述

一、设计模式概述 设计模式&#xff08;Design pattern&#xff09;**是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结 在GOF编写的设计模式(可复用面向对象软件的基础)一书中说道: 本书涉及的设计模式并不描述新的或未经证实的设计&#xff0c;我们只收…

智能汽车加速车规级存储应用DS2431P+TR 汽车级EEPROM 存储器IC

DS2431PT&R是一款1024位1-Wire EEPROM芯片&#xff0c;由四页存储区组成&#xff0c;每页256位。数据先被写入一个8字节暂存器中&#xff0c;经校验后复制到EEPROM存储器。该器件的特点是&#xff0c;四页存储区相互独立&#xff0c;可以单独进行写保护或进入EPROM仿真模式…

第十五天-爬虫项目实战

目录 1.介绍 2.代码 1.main.py 2.PageSider.py 3.DetailSpider.py 4.DataParse.py 5.Constant.py 6.HanderRequest.py 1.介绍 1. 使用多线程爬取网站 2.爬取数据后保存至excel 3.爬取网站(仅做测试)网创类项目爬取&#xff1a;https://www.maomp.com/ 4..实现效果 …

【力扣白嫖日记】585.2016年的投资

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 585.2016年的投资 表&#xff1a;Person 列名类型pidinttiv_2015floattiv_2016floatlatfloatlonfloat pid …

队列实现栈与栈实现队列

文章目录 前言一、使用队列实现栈二、使用栈实现队列 前言 1、用于巩固栈和队列。 2、本章是使用纯C语言实现的栈和队列&#xff0c;不懂的可以先看看这个喔&#xff1a;c语言实现栈和队列&#xff0c;当然这里直接用C的栈和队列会更方便哦。 3、利于复习C语言的知识点。 一、使…

吸猫毛空气净化器哪个好?推荐除猫毛效果好宠物空气净化器品牌

当下有越来越多的家庭选择养宠物&#xff01;尽管家里变得更加温馨&#xff0c;但养宠可能会带来异味和空气中的毛发增多可能会带来健康问题&#xff0c;这是一个大问题&#xff01; 不想家里弥漫着异味&#xff0c;特别是来自宠物便便的味道&#xff0c;所以需要一款能够处理…

跨境知识分享:什么是动态IP?和静态IP有什么区别?

对于我们跨境人来说&#xff0c;清楚地了解IP地址、代理IP等这些基础知识&#xff0c;并学会正确地使用IP地址对于保障店铺的安全性和稳定性至关重要&#xff0c;尤其是理解动态IP和静态IP之间的区别&#xff0c;以及如何利用这些知识来防止账号关联&#xff0c;对于每个电商卖…

什么是MAC地址? win10电脑查看MAC地址的多种方法

您是否知道连接到家庭网络的每件硬件都有自己的身份&#xff1f;正如每个设备都分配有自己的 IP 地址一样&#xff0c;每个硬件都有一个唯一的网络标识符。 该标识符称为MAC 地址。MAC 代表媒体访问控制。您可能需要 MAC 地址来解决网络问题或配置新设备。在 Windows 中查找您…

地图可视化绘制 | R-cartography 艺术地图绘制

本期推文我们介绍一个可以绘制颇具“艺术”风格地图的可视化包-cartography&#xff0c;主要涉及的内容如下&#xff1a; R-cartography 简介 R-cartography 实例应用 所有完整代码都已整理之我们的线上课程&#xff0c;有需要的同学v yidianshuyulove 咨询 R-cartography …

阿里云全面降价,释放了什么信号?

元宵节刚过&#xff0c;阿里云就放了一个大招—— 今天&#xff08;2月29日&#xff09;上午&#xff0c;阿里云发布通告&#xff0c;宣布全线下调云产品官网售价。这次降价涉及计算、存储、数据库等在内的100多款产品&#xff0c;平均降价幅度超过20%&#xff0c;最高降幅达55…

day07_分类管理EasyExcel品牌管理

文章目录 1 分类管理1.1 菜单添加1.2 表结构介绍1.3 页面制作1.4 列表查询1.4.1 需求分析1.4.2 后端接口CategoryCategoryControllerCategoryServiceCategoryMapperCategoryMapper.xml 1.4.3 前端对接category.jscategory.vue 2 EasyExcel2.1 数据导入导出意义2.2 EasyExcel简介…

1950-2022年各省逐年平均降水量数据

1950-2022年各省逐年平均降水量数据 1、时间&#xff1a;1950-2022年 2、指标&#xff1a;省逐年平均降水量 3、范围&#xff1a;33省&#xff08;不含澳门&#xff09; 4、指标解释&#xff1a;逐年平均降水数据是指当年的日降水量的年平均值&#xff0c;不是累计值&#…

【leetcode】环形链表✚环形链表II

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1.环形链表解题拓展&#xff1a; 2.环形链表II 1.环形链表 点击查看题目 解题 思路: bool hasCycle…

【问题记录】pip install遇到“No space left on device“

一、pip安装包的过程中出现以下问题 二、问题溯源 【1】刚开始以为是空间不足&#xff0c;后来 df -h 看了一下&#xff0c;pip安装目录下空间绝对足够&#xff01;明显不是空间不足的问题。 【2】后来查了一下&#xff0c;发现是home目录下的空间满了&#xff0c;pip安装时&…

一台工控机的能量

使用Docker搭建EPICS的IOC记录 Zstack EPICS Archiver在小课题组的使用经验 以前电子枪调试&#xff0c;用一台工控机跑起束测后台&#xff0c;这次新光源用的电子枪加工回来又是测试&#xff0c;又是用一台工控机做起重复的事&#xff0c;不过生命在于折腾&#xff0c;重复的…

计算机网络-网络互连和互联网(五)

1.路由器技术NAT&#xff1a; 网络地址翻译&#xff0c;解决IP短缺&#xff0c;路由器内部和外部地址进行转换。静态地址转换&#xff1a;静态NAT&#xff08;一对一&#xff09; 静态NAT&#xff0c;内外一对一转换&#xff0c;用于web服务器&#xff0c;ftp服务器等固定IP的…