当前位置: 首页 > news >正文

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();}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 缓存与分布式锁
  • T113-i 倒车低概率性无反应,没有进入倒车视频界面
  • Spring-Cache 缓存
  • Zookeeper背景优缺点,以及应用场景
  • 头歌资源库(32)n皇后问题
  • 【坑】微信小程序开发wx.uploadFile和wx.request的返回值格式不同
  • 如何找工作 校招 | 社招 | 秋招 | 春招 | 提前批
  • Docker Compose部署Kafka集群并在宿主机Windows连接开发
  • 对AAC解码的理解
  • Linux C++ 054-设计模式之外观模式
  • leetcode日记(38)字母异位词分组
  • C++数组
  • 【密码学】消息认证
  • 九、Linux二进制安装ElasticSearch集群
  • 【JavaScript】解决 JavaScript 语言报错:Uncaught SyntaxError: Unexpected token
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • express.js的介绍及使用
  • go语言学习初探(一)
  • JavaScript标准库系列——Math对象和Date对象(二)
  • Java基本数据类型之Number
  • PHP变量
  • STAR法则
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1
  • Hibernate主键生成策略及选择
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢?交流转换到直流(整流器)直流变交流(逆变器)​
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • (03)光刻——半导体电路的绘制
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (Java数据结构)ArrayList
  • (第61天)多租户架构(CDB/PDB)
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (七)Appdesigner-初步入门及常用组件的使用方法说明
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (三)elasticsearch 源码之启动流程分析
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (一)、软硬件全开源智能手表,与手机互联,标配多表盘,功能丰富(ZSWatch-Zephyr)
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • .NET 8.0 发布到 IIS
  • .NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法
  • .net 中viewstate的原理和使用
  • /boot 内存空间不够
  • @entity 不限字节长度的类型_一文读懂Redis常见对象类型的底层数据结构
  • [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存...
  • [BIZ] - 1.金融交易系统特点
  • [C++]: std::move
  • [C++11 多线程同步] --- 条件变量的那些坑【条件变量信号丢失和条件变量虚假唤醒(spurious wakeup)】
  • [C进阶] 数据在内存中的存储——浮点型篇
  • [Hdp] lc552. 学生出勤记录 II(dp+递推+状态定义+状态转移+向前转移+好题)
  • [HDU]2161Primes
  • [ISITDTU 2019]EasyPHP
  • [LeetCode]—Rotate Image 矩阵90度翻转
  • [Linux打怪升级之路]-vim编辑器(看就能马上操作噢)