uniapp 小程序注册全局弹窗组件(无需引入,无需写标签)

由于uniapp没有开放根节点,所以一般情况下通过app.components注册,在需要的页面直接写组件标签,但是如果每个页面都需要的话,再每个都加的话会非常的麻烦

网上的思路都不咋地:

1.通过写一个透明弹窗页面来实现,亲测页面透明设置无效。

2.通过编写全局组件每个页面都引入,非常不方便。


这里采用vite插件实现,这里满足uniapp+Vue3+vite 目前小程序测试没有问题

安装插件

npm i @yck-web/vite-plugin-template-inset 

 配置:

//修改配置vite.config.js, plugins中添加插件(位置需要放在uni()方法前面)
import uni from "@dcloudio/vite-plugin-uni";import vitePluginTemplateInset from "@yck-web/vite-plugin-template-inset";plugins: [vitePluginTemplateInset(['<GlobalDialog ref=\'GlobalDialog\'></GlobalDialog>']),uni(),],
//main.js全局注册import GlobalDialog from '@/components/GlobalDialog'app.component('GlobalDialog', GlobalDialog)
<!-- 弹窗口组件 -->
<template name="globalDialog"><view class="mask position-fixed bg-#000 opacity-60% w-100vh h-100vh" style="z-index:1" v-if="show">mask</view>
</template><script setup lang="ts">
import { ref } from "vue";let show = ref(false);const open = () => {show.value = true;
};
const close = () => {show.value = false;
};//暴露open和close方法
defineExpose({open,close,
});
</script>
<style lang="scss" scoped></style>
//页面使用
const instance = getCurrentInstance()
const showGlobalPop = () => {instance?.refs?.GlobalDialog?.open();}

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

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

相关文章

在 Objective-C 中,如何有效地处理内存管理以避免内存泄漏?

在 Objective-C 中&#xff0c;可以通过以下几个方法来有效地处理内存管理以避免内存泄漏&#xff1a; 使用自动引用计数&#xff08;ARC&#xff09;&#xff1a;ARC 是一种自动内存管理机制&#xff0c;它可以自动地插入 retain、release 和 autorelease 方法来管理对象的内存…

Proteus元器件库与仪器仪表

常用元件与仪表简介 分立元件 1. 电阻Resistor 电阻 RES 排阻 RESPACK-8 2. 电容 Capacitor 瓷片电容 CAP 电解电容 CAP-ELEC 3. 电感 Inductor 4. 电位器 Potentiometer 5. 二极管 Diode 发光二极管 LED 6. 晶体管 Transistor 7. 场效应管 FET 8. 三极管 T…

LivePortrait 数字人:开源的图生视频模型,本地部署和专业视频制作详细教程

看到上面面部表情动态图片&#xff0c;是不是感觉挺有有意思&#xff1f;它就是通过快手、中科大和复旦大学联合研发的图生视频开源大模型LivePortrait&#xff08;灵动人像&#xff09;生成的视频。通过LivePortrait大模型&#xff0c;我们只需要一张人脸正面图片和一段文字或…

单相整流-TI视频课笔记

目录 1、单相半波整流 1.1、单相半波----电容滤波---超轻负载 1.2、单相半波----电容滤波---轻负载 1.3、单相半波----电容滤波---重负载 2、全波整流 2.1、全波整流的仿真 2.2、半波与全波滤波的对比 3、全桥整流电路 3.1、全波和全桥整流对比 3.2、半波全波和全桥…

.env.development、.env.production、.env.staging

环境变量文件&#xff08;如 .env.development、.env.production、.env.staging&#xff09;用于根据不同的环境&#xff08;开发、生产、测试等&#xff09;配置应用程序的行为。 作用 .env.development&#xff1a;用于开发环境的配置。开发人员在本地开发时会使用这个文件…

php获取,昨,今,后天.... 本周,月,年...日期时间戳

时间戳->时间转换工具 时间戳(Unix timestamp)转换工具 - 在线工具 (tool.lu) 代码如下: public function date(){/** 日期 **/// 今天的日期$result[today_date] date("Y-m-d");// 昨天的日期$result[yesterday_date] date("Y-m-d", strtotime(&quo…

Oracle使用fetch first子句报错:ORA-00933 SQL命令未正确结束

问题背景 今天在统计终端厂商告警次数Top10的时候使用SQL查询使用到了fetch first子句&#xff0c;结果执行报错&#xff1a;ORA-00933 SQL命令未正确结束。 报错原因 Oracle数据库中&#xff0c;使用 FETCH FIRST 子句需要启用 Oracle 12c 及以上版本。如果在较低版本的 Or…

【Git使用】管理代码

Git使用 1、git命令1.1、git init1.2、git add1.3、git commit1.4、git push1.5、git branch1.6、git fetch1.7、git checkout X1.8、git status 2、提交执行顺序3、常见错误Error3.1、error: pathspec XXX did not match any file(s) known to git3.2、fatal: not a valid obj…

使机器人在执行任务倒快递

这段代码是用来控制机器人在不同模式下的行为&#xff0c;具体是处理 residenceright 和 residenceleft 两种模式下的过渡过程。代码中使用了一个 mythread 结构体&#xff0c;该结构体包含了机器人的当前模式 (mode) 和过渡过程的阶段 (residenceTransientProcess)。以下是对这…

PyTorch是使用GPU和CPU优化的深度学习张量库——torchvision

torchvision datasets torchvision.datasets 包含了许多标准数据集的加载器。例如&#xff0c;CIFAR10 和 ImageFolder 是其中两个非常常用的类。 CIFAR10 CIFAR10 数据集是一个广泛使用的数据集&#xff0c;包含10类彩色图像&#xff0c;每类有6000张图像&#xff08;5000张…

C++ 类和对象(上)

再C中&#xff0c;我们使用类定义自己的数据类型。通过定义新的类型来反映待解决的问题中的各种概念&#xff0c;可以使我们更容易编写&#xff0c;调试和修改程序。 类定义格式 首先类的定义格式和结构体差不多&#xff0c;而结构体的那一套语法也可以在C中使用。class是定义…

RC-u3 跑团机器人

这道题目要求我们模拟一个跑团机器人&#xff0c;解析玩家输入的包含骰子掷出和加减法运算的指令&#xff0c;计算出不同种类的骰子分别需要掷出几个&#xff0c;并根据输入指令得到可能的最小结果和最大结果。 题目分析 我们需要解析输入的表达式&#xff0c;处理其中的加法…

oracle数据库的plsql免安装版安装

这个是连接oracle数据库的&#xff0c;注意安装不能有中文路径。以下只是示例。 1、打开D:\ruanjian\plsql\plsql\plsql&#xff0c;发送plsqldev.exe快捷方式到桌面。 2、新弹出的页面填写cancel,什么也不写。 3、将instanceclient解压&#xff0c;并复制文件路径。 修改tool…

[Python学习篇] Python搭建静态web服务器

Python内置的web静态服务器 Python内置的http.server模块可以快速启动一个简单的HTTP服务器。 在Python 3中&#xff0c;打开命令行或终端&#xff0c;在你想要作为静态服务器根目录的文件夹下&#xff0c;运行以下命令&#xff1a; python -m http.server 8000 这将会在…

纯vue+js实现数字0到增加到指定数字动画效果功能

关于数字增加动画效果网上基本上都是借助第三方插件实现的,就会导致有的项目安装插件总会出问题,所有最好使用原生vue+js实现,比较稳妥 纯vue+js实现数字0到增加到指定数字动画效果功能 vue+js 实现数字增加动画功能 效果图 其中,关于数字变化的间隔时间,延时效果都可…

数据结构与算法 —— DFS的定义与原理

DFS&#xff08;Distributed File System&#xff0c;分布式文件系统&#xff09;是一种允许网络连接的多个计算机之间共享信息的系统架构。与传统的文件系统&#xff08;如NTFS、HFS等&#xff09;不同&#xff0c;DFS分布在多个文件服务器或多个位置&#xff0c;通过计算机网…

澳门建筑插画:成都亚恒丰创教育科技有限公司

澳门建筑插画&#xff1a;绘就东方之珠的斑斓画卷 在浩瀚的中华大地上&#xff0c;澳门以其独特的地理位置和丰富的历史文化&#xff0c;如同一颗璀璨的明珠镶嵌在南国海疆。这座城市&#xff0c;不仅是东西方文化交融的典范&#xff0c;更是建筑艺术的宝库。当画笔轻触纸面&a…

一个spring boot项目的启动过程分析

1、web.xml 定义入口类 <context-param><param-name>contextConfigLocation</param-name><param-value>com.baosight.ApplicationBoot</param-value> </context-param> 2、主入口类: ApplicationBoot,SpringBoot项目的mian函数 SpringBo…

时间序列学习篇

今天看了一些时间序列算法相关的文档和帖子。很惭愧&#xff0c;也是搞了很长时间预测算法的人了&#xff0c;但是都没能详细学习一下时间序列的理论。 首先&#xff0c;要预测一个时序问题&#xff0c;可以从什么路径解决呢&#xff1f;一种是认为过去序列状态影响将来的状态…

视频调整帧率、分辨率+音画同步

# python data_utils/pre_video/multi_fps_crop_sync.pyimport cv2 import os from tqdm import tqdm import subprocess# 加载人脸检测模型 face_cascade cv2.CascadeClassifier(cv2.data.haarcascades haarcascade_frontalface_default.xml)def contains_face(frame):gray …