uniapp上如何绑定全局事件总线(引入自定义全局组件例如弹窗)

1、在main.js中挂载bus

// main.js
Vue.prototype.$bus = new Vue();
uni.$bus = Vue.prototype.$bus;  // 确保在 uni 上绑定

2、写一个全局弹窗组件

<template><view v-if="visible" class="toast-container"><view class="icon-container"><text class="icon">!</text> <!-- 圆形边框内的感叹号 --></view><text class="toast-message">{{ message }}</text></view>
</template><script>
export default {data() {return {visible: false,message: ''};},created() {this.$bus.$on('showToast', this.showToast);},methods: {showToast(message) {this.message = message;this.visible = true;setTimeout(() => {this.visible = false;}, 2000); // 2秒后自动隐藏}}
};
</script><style scoped>
.toast-container {position: fixed;bottom: 150rpx;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.7);padding: 10px 20px;border-radius: 5px;text-align: center; /* 文字居中 */z-index: 9999;
}.icon-container {width: 60rpx; /* 圆形的宽度 */height: 60rpx; /* 圆形的高度 */border: 2px solid white; /* 圆形的边框 */border-radius: 50%; /* 使其变为圆形 */display: flex; /* 使用 flexbox 居中内容 */align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */margin: 0 auto 5px; /* 圆形和文本之间的间距 */
}.icon {color: white; /* 图标的颜色 */font-size: 24px; /* 图标的大小 */
}.toast-message {color: #fff;font-size: 18px; /* 调整字体大小 */
}
</style>

3、需要的地方引入使用

uni.$bus.$emit('showToast', result.response.data.message);

也可以在easycom中学习uniapp组件的全局引入方式

"easycom": {"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue","^my-(.*)": "@/componets/my-$1.vue",}

 其中$1就是my-后面的变量值。

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

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

相关文章

DEV C++自动补全文件头的设置操作

第一步&#xff1a;打开DEV C 第二步&#xff1a;打开“工具” 第三步&#xff1a;点击“编辑器属性” 第四步&#xff1a;点击“代码” 第五步&#xff1a;点击“缺省源” 第六步&#xff1a;输入常用的文件头代码&#xff1a; 例如&#xff1a; #include<bits/stdc.h&g…

数据结构(JAVA)包装类泛型

文章目录 包装类基本数据类型和对应的包装类装箱和拆箱面试题 泛型什么是泛型泛型的语法泛型类的使用泛型的使用裸类型(Raw Type) &#xff08;仅需了解&#xff09;擦除机制泛型的上界泛型方法 包装类 基本数据类型和对应的包装类 注意&#xff0c;除了int基本数据类型的包装…

OracleT5-2 Solaris11安装

1、Solaris11安装 在光驱中插入Solaris11的光盘后,在ok提示中boot cdrom {0} ok boot cdrom NOTICE: Entering OpenBoot. NOTICE: Fetching Guest MD from HV. NOTICE: Starting additional cpus. NOTICE: Initializing LDC services. NOTICE: Probing PCI devices. N…

《 C++ 修炼全景指南:十六 》玩转 C++ 特殊类:C++ 六种必备特殊类设计的全面解析

摘要 这篇博客深入探讨了六种 C 特殊类的设计及其技术细节。首先&#xff0c;介绍了如何设计只能在堆上或栈上创建对象的类&#xff0c;通过控制构造函数的访问权限来限定对象的内存分配区域。接着&#xff0c;探讨了如何设计一个不能被拷贝的类&#xff0c;避免资源重复释放的…

玄机平台-应急响应-webshell查杀

首先xshell连接 然后进入/var/www/html目录中&#xff0c;将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务&#xff0c;将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…

Qt通过QProcess调用第三方进程

我们在运行Qt程序时&#xff0c;有时需要调用第三方程序&#xff0c;这时就可以用QProcess类。具体如下&#xff1a; 一. 启用进程之前 我们需要在头文件中定义一个私有变量指针&#xff0c;为了使他能长时间运行&#xff0c;定义为指针。 #include <QProcess> class …

生活中的感悟

喜怒不形于色 以前一直觉得做人要做本我&#xff0c;该笑就笑该怒就怒。但慢慢发现&#xff0c;这样可能不太好。 暂且不谈别人会感知你的真实想法&#xff0c;就单说一点&#xff0c;表情是否会引起别人的误判&#xff1f;表情除了开心和愤怒&#xff0c;还有很多&#xff0…

【存储设备专栏 2.1 -- linux 下 fdisk -l 命令详细介绍】

> 请阅读【嵌入式及芯片开发学必备专栏】< 文章目录 fdisk -l 详细介绍fdisk -l 的详细介绍常用选项 使用举例查找新插入的 USB 设备 fdisk -l 详细介绍 在 Linux 系统中&#xff0c;fdisk 是一个用于磁盘分区的命令行工具。fdisk -l 则用于列出所有可用的磁盘及其分区信…

初识MySQL · 数据库

目录 前言&#xff1a; 数据库 简单使用 存储引擎 前言&#xff1a; 本文也是MySQL的第一篇文章了&#xff0c;新的知识点已经出现&#xff0c;怎么能够停止不前&#xff0c;穿越时空……(迪迦奥特曼乱入哈哈哈)。 言归正传&#xff0c;我们在本文的目标有&#xff1a; …

Flink CDC同步mysql数据到doris

前置参考 flink快速安装&#xff1a;Flink入门-CSDN博客 doris快速安装&#xff1a;Apache Doris快速安装-CSDN博客 Flink CDC简介 Flink CDC 是一个基于流的数据集成工具&#xff0c;旨在为用户提供一套功能更加全面的编程接口&#xff08;API&#xff09;。 该工具使得用户能…

洞察云上风险,主机安全尽在掌握

在实战攻防演练中&#xff0c;主机一直是攻击方的最终目标。作为网络架构中的重要组成部分&#xff0c;主机包含了大量的敏感数据、关键服务和系统资源。同时主机拥有网络资源的访问权限&#xff0c;攻击者通过入侵主机获得权限&#xff0c;进而控制整个网络或系统。因此做好主…

vue2 Canvas 多边形区域绘制组件封装

效果预览&#xff1a; CanvasBox组件 <!-- 区域设置canvas --> <template><div class"all" ref"divideBox"><!-- <div><button click"test">清空</button></div> --><img id"img"…

Ubuntu中MySQL远程登录设置

mysql单独放在一台Ubuntu服务器上&#xff0c;我远程连接不上。可能是安装的时候忘记设置远程登录了。事后补救措施如下&#xff1a; MySQL 绑定地址配置问题 MySQL 可能只绑定了 localhost&#xff0c;无法接受来自外部主机的连接。你需要检查 MySQL 的配置文件 /etc/mysql/…

使用Vscode配置ftp连接远程服务器(上传本地文件)

1.安装插件 扩展商店搜sftp,点击进行安装。 2.配置json文件 crtl+shift+p 输入ftp配置命令 sftp:config {"name": "My Server", //设置名字"host": "localhost"</

腐蚀膨胀预处理

腐蚀&#xff1a;通过减少前景对象&#xff08;例如白色字符&#xff09;的边缘&#xff0c;腐蚀可以用来减小或消除细小的干扰线。如果干扰线较细&#xff0c;腐蚀可以有效地“消除”这些线条&#xff0c;同时保留较粗的字符。 膨胀&#xff1a;在腐蚀之后&#xff0c;膨胀可…

使用 Logistic Regression 识别手写数字-PyTorch

逻辑回归是一种非常常用的统计方法,它允许我们从一组自变量预测二进制输出。本文之前已经介绍了 Logistic 回归的各种属性及其 Python 实现 。现在,我们将了解如何在 PyTorch 中实现这一点,PyTorch 是由 Facebook 开发的一个非常流行的深度学习库。 现在,我们将了解如何使用…

上门按摩系统开发方案源码搭建

上门按摩系统开发方案 一、项目概述 上门按摩系统是一个连接按摩技师和客户的平台&#xff0c;旨在提供便捷、高效的上门按摩服务。通过该系统&#xff0c;客户可以轻松预约合适的按摩技师&#xff0c;并享受个性化的按摩服务。 二、系统功能模块 用户管理模块&#xff1a;…

TCP——Socket

应用进程只借助Socket API发和收但是不关心他是怎么进行传和收的 数据结构 图示Socket连接 捆绑属于隐式捆绑

Redis非关系型数据库操作命令大全

以下是 Redis 的常用操作命令大全&#xff0c;涵盖了键值操作、字符串、哈希、列表、集合、有序集合、发布/订阅、事务等多个方面的操作。 1. 通用键命令 命令说明SET key value设置指定 key 的值GET key获取指定 key 的值DEL key删除指定的 keyEXISTS key检查 key 是否存在E…

数据驱动时代:五款免费报表工具深度解析

在当今数据驱动的时代&#xff0c;报表工具已经成为各类企业进行决策和管理的重要工具。无论是大中型企业还是小微企业&#xff0c;能够快速、高效地生成可视化报表&#xff0c;洞察业务运营情况&#xff0c;已经成为提升竞争力的关键。今天为大家挑选了5款非常优秀的报表软件&…