Vue3封装全局插件

定义一个全局加载组件

一、首先定义dom元素

定义一个index.vue文件

<template><div class="loading">loading...</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.loading {display: flex;align-items: center;justify-content: center;font-size: 30px;color: #fff;background: rgba(0, 0, 0, 0.8);height: 100vh;
}
</style>

第二步给dom元素添加,控制显示的开关和方法,然后通过defineExpose暴露出去

<script setup lang="ts">
import { ref } from "vue"
const isShow = ref<boolean>(false);
const show = () => {isShow.value = true
}
const hide = () => {isShow.value = false
}
defineExpose({isShow,show,hide
})
</script>
二、把组件渲染到全局

定义一个index.ts把组件暴露出去

createVNode创建虚拟节点,render把节点渲染到body,然后创建一个全局变量方便操作$Loading

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,}}
}
三、注册组件
import { createApp } from 'vue'
import App from './App.vue'
import loading from './components/loading'const app = createApp(App)type Lod = {show():void,hide():void
}declare module 'vue' {export interface ComponentCustomProperties {$Loading: Lod}
}app.use(loading)
app.mount('#app')

使用

<template><div class=""></div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const app = getCurrentInstance();
app?.proxy?.$Loading.show();
setTimeout(() => {app?.proxy?.$Loading.hide();
}, 2000)
</script>
<style scoped></style>

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

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

相关文章

(swjtu西南交大)数据库实验(概念数据库设计及逻辑关系转换):音乐软件数据管理系统

一、实体型及属性 &#xff08;20分&#xff09; 用户&#xff08;账号&#xff0c;用户名&#xff0c;密码&#xff0c;性别&#xff0c;生日&#xff0c;地区&#xff0c;手机号&#xff0c;个性签名&#xff0c;信息修改审核客服&#xff09; 歌手&#xff08;歌手号&#…

C++模拟实现——红黑树封装set和map

一、红黑树迭代器的实现 基本的框架和实现链表的迭代器思路是一样的&#xff0c;都是对指针进行封装处理&#xff0c;然后实现一些基本的运算符重载&#xff0c;最重要的是operator&#xff0c;需要不递归的实现走中序的规则&#xff0c;这里只实现那最核心的几个基本功能&…

使用 gpg 对Linux下的文件加密

其实蛮简单的&#xff0c;Linux原生就有gpg命令。 gpg表示GNU Privacy Guard。PGP表示Pretty Good Privacy。有点绕&#xff0c;别搞混。 gpg 是 GNU Privacy Guard (GnuPG) 的 OpenPGP&#xff08;Pretty Good Privacy&#xff09;部分。 它是一个使用 OpenPGP 标准提供数字…

第一次参加算法比赛是什么感受?

大家好&#xff0c;我是怒码少年小码。 冬日暖阳&#xff0c;好日常在。今天中午在食堂干饭的时候&#xff0c;我的手机&#x1f4f1;收到了一条收货信息。 阿&#xff1f;什么玩意儿&#xff1f;我又买啥了&#xff1f; 个败家玩意&#xff0c;我都准备好叨叨我自己&#x…

msvcp120.dll缺失的解决方法与作用介绍

大家好&#xff01;我是小编。今天&#xff0c;我想和大家分享一下关于“找不到msvcp120.dll无法继续执行代码的5个解决方法”的话题。 首先&#xff0c;让我们来了解一下msvcp120.dll的作用。msvcp120.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;它…

51单片机演奏兰亭序

使用开发板为普中51-实验板 普中-2 时钟频率&#xff1a;11.001081MHZ 演示视频&#xff1a; 【51单片机演奏兰亭序】 https://www.bilibili.com/video/BV12G411D7uK/?share_sourcecopy_web&vd_source0f48f7cc0fef720b95e067122ac83437 源码如下&#xff1a; 数组较大&a…

高防CDN如何预防攻击?

现在网络攻击事件越来越多&#xff0c;而且愈发凶猛&#xff0c;为了保障互联网业务能稳定正常的运行&#xff0c;市场上出现了很多高防产品&#xff0c;例如高防服务器、高防IP、高防CDN等等。其中究竟高防CDN怎么防攻击&#xff0c;能防哪些攻击&#xff1f;高防CDN如何实现防…

git创建新分支将项目挂载到新分支操作

1.如果是本地项目,没有关联过git // 在git创建仓库(默认master分支) // 复制克隆链接(默认下载下来的是master仓库,克隆指定分支如下所示) git clone -b 分支名 克隆地址 // 将某分支克隆下来后,直接将项目放到新文件夹内(执行以下命令提交即可) git add . git commit -m 备注…

maven配置文件

<?xml version"1.0" encoding"UTF-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding …

matlab-BP神经网络的训练参数大全

本文部分图文来自《老饼讲解-BP神经网络》bp.bbbdata.com 本文列兴趣MATLAB神经网络工具箱中&#xff0c;训练参数trainParam的各个参数与意义 以方便在使用matlab工具箱时&#xff0c;用于查阅 一、matlab神经网络工具箱trainParam的参数列表 trainParam中的各个具体参数如下…

4.2 Windows驱动开发:内核中进程线程与模块

内核进程线程和模块是操作系统内核中非常重要的概念。它们是操作系统的核心部分&#xff0c;用于管理系统资源和处理系统请求。在驱动安全开发中&#xff0c;理解内核进程线程和模块的概念对于编写安全的内核驱动程序至关重要。 内核进程是在操作系统内核中运行的程序。每个进…

对象分配规则

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

函数有返回类型,但函数体未返回类型,程序崩溃问题记录

问题 使用类指针调用函数时&#xff0c;程序崩溃。 问题定位&#xff1a; name new nameSetting;name->setName("helloworld");qDebug().noquote() << name->getName();原因 class nameSetting { public:nameSetting();QString setName(const QStri…

GB28181视频监控国标平台EasyGBS如何进行服务迁移?

视频流媒体安防监控国标GB28181平台EasyGBS视频能力丰富&#xff0c;部署灵活&#xff0c;既能作为业务平台使用&#xff0c;也能作为安防监控视频能力层被业务管理平台调用。国标GB28181视频EasyGBS平台可提供流媒体接入、处理、转发等服务&#xff0c;支持内网、公网的安防视…

golang学习笔记——接口和继承比较1

继承 Go 语言的设计之初&#xff0c;就不打算支持面向对象的编程特性&#xff0c;因此 Go 不支持面向对象的三大特性之一——继承。但是 Go 可以通过组合的思想去实现 “继承”。继承是面向对象的三大特性之一&#xff0c;继承是从已有的类中派生出新的类&#xff0c;新的类能…

【Django使用】4大模块50页md文档,第4篇:Django请求与响应和cookie与session

当你考虑开发现代化、高效且可扩展的网站和Web应用时&#xff0c;Django是一个强大的选择。Django是一个流行的开源Python Web框架&#xff0c;它提供了一个坚实的基础&#xff0c;帮助开发者快速构建功能丰富且高度定制的Web应用 Django全套笔记地址&#xff1a; 请移步这里 …

Unity中Shader的PBR的基础知识与理论

文章目录 前言一、什么是PBR二、什么是PBS在这里插入图片描述 三、PBS的核心理论1、物质的光学特性&#xff08;Substance Optical Properties&#xff09;2、微平面理论&#xff08;Microfacet Theory&#xff09;3、能量守恒&#xff08;Energy Conservation&#xff09;4、菲…

7 Redis的PipeLine

PipeLine的作用是批量执行命令 redis的性能瓶颈基本上是网络 import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.…

【数据结构】队列详解

Hello everybody!今天给大家讲讲队列的相关知识。队列&#xff0c;属于一种数据结构。从字面意思上理解&#xff0c;就像是排队一样&#xff0c;在食堂中&#xff0c;先排队的人自然就先买到饭。队列也是如此&#xff0c;先入队列的数据自然就先出队列。希望大家可以通过这篇文…

C语言生成dll与lib文件

环境要求 新建一个空白项目&#xff0c;可以是exe的&#xff0c;也可以直接是dll的&#xff0c;也可以是啥都没有的空项目&#xff0c;推荐创建空项目&#xff0c;项目创建好以后进行配置&#xff0c;共两步 第一步&#xff0c;打开项目属性 第二步&#xff0c;设置配置类型…