uni-app/vue项目如何封装全局消息提示组件

效果图:

第一步:封装组件和方法,采用插件式注册!

在项目目录下新建components文件夹,里面放两个文件,分别是index.vue和index.js.

index.vue:

<template><div class="toast" v-if="isShow">{{ message }}</div>
</template><script>
export default {name: 'AllToast',props: {isShow: {type: Boolean,required: true,default: false},message: {type: String,required: true,default: ''}},data() {return {};}
}
</script><style scoped>
.toast {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;width: 300rpx;height: 100rpx;background-color: red;display: flex;justify-content: center;align-items: center;color: #fff;border-radius: 10rpx;
}
</style>

index.js:

import Vue from 'vue'
import AllToast from './index.vue'const ToastConstructor = Vue.extend(AllToast)function showToast(message) {const instance = new ToastConstructor({el: document.createElement('view'),propsData: {isShow: true,message: message}})document.body.appendChild(instance.$el)setTimeout(() => {instance.isShow = falsedocument.body.removeChild(instance.$el)}, 3000) // 3秒后自动隐藏
}export default {install: function (vue) {vue.component('toast', AllToast)vue.prototype.$showToast = showToast}
}

第二步:全局挂载

在main.js中引入和使用

import App from './App'
import uView from '@/uni_modules/uview-ui'
// 引入全局组件
import Mycomponent from '@/components/index.js'// #ifndef VUE3
import Vue from 'vue'
Vue.use(uView)
// 挂载组件
Vue.use(Mycomponent)
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// 测试使用
Vue.prototype.$showToast('请求失败');
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif

第三步:使用方法

vue页面使用

this.$showToast('我是全局组件菜鸡')

其他页面使用

//对于this指向不是vue的需要先引入vue
import Vue from 'vue'//然后调用原型方法
Vue.prototype.$showToast('请求失败');

同理 这个方法也适用于Vue项目不止是uni

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

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

相关文章

【C++报错已解决】Invalid Use of Incomplete Type

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言&#xff1a;一、问题描述1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一&#xff1a;完整类型定义2.2 方法二…

idea:解决Maven报错 Properties in parent definition are prohibited

在父pom文件中定义了 <dhversion>1.0-SNAPSHOT</dhversion> 在子模块中引用 <parent><groupId>com.douhuang</groupId><artifactId>douhuang-springcloud</artifactId><version>${dhversion}</version> </parent&…

安卓文件上传照片单张及多张照片上传实现

一、首先导入对应库 //网络请求库 implementation com.squareup.okhttp3:okhttp:3.9.0//Gson解析 implementation com.google.code.gson:gson:2.10.1 二、然后就是们实现上传方法 UploaderTool.java import android.util.Log;import com.google.gson.Gson;import java.io.File…

算法day03 桶排序 数据结构分类 时间复杂度 异或运算

学数据结构之前 必看_哔哩哔哩_bilibili 1.认识复杂度和简单排序算法_哔哩哔哩_bilibili 桶排序&#xff08;Bucket sort&#xff09;------时间复杂度为O(n)的排序方法&#xff08;一&#xff09;_多桶排序时间复杂度-CSDN博客 桶排序 测试场景&#xff1a;数组中有10000个随…

threeJS 为模型增加精灵图

前言 之前使用css3DRender创建图片弹框&#xff0c;在旋转模型到背面时&#xff0c;弹框也背对模型&#xff0c;这与UI要求的效果有出入。考虑将css3DRender换成css2Drender,但是可能是模型的问题&#xff0c;将弹框加入到模型的子集&#xff0c;旋转模型时弹框发生比较明显的…

deep learning 环境配置

1 NVIDIA驱动安装 ref link: https://blog.csdn.net/weixin_37926734/article/details/123033286 2 cuda安装 ref link: https://blog.csdn.net/qq_63379469/article/details/123319269 进去网站 https://developer.nvidia.com/cuda-toolkit-archive 选择想要安装的cuda版…

研华PCI-1711板卡在WIN10教育版系统无法安装驱动

主要配置&#xff1a;CHIPSET AIMB-705G2、CPU I5-6500、WIN10 教育版、PCI-1711 问题描述&#xff1a;使用官网下载的驱动XNiva&#xff0c;驱动包安装完成后板卡无法正常识别。解决方法&#xff1a;正常安装无法情况下只能尝试强制安装数字签名&#xff0c;步骤如下。 XNiv…

Gunicorn:Python Web应用的高效生产服务器

引言 在现代Web开发中&#xff0c;部署Python Web应用通常需要一个既高效又可靠的服务器。Gunicorn&#xff08;Green Unicorn&#xff09;是一个Python WSGI HTTP服务器&#xff0c;它简单、快速且易于使用&#xff0c;非常适合生产环境。本文将介绍Gunicorn的基本概念、安装…

Springboot redisson 自定义注解实现双写一致性

在 Spring Boot 项目中使用 Redisson 实现双写一致性&#xff08;即数据库和缓存的一致性&#xff09;&#xff0c;可以通过自定义注解和 AOP&#xff08;面向切面编程&#xff09;来简化代码并提高可维护性。以下是一个具体的案例&#xff0c;展示了如何使用自定义注解和 AOP …

Java研学-Shiro安全框架(四)

六 SpringBoot集成Shiro认证 1 分析 Shiro提供认证授权功能&#xff0c;所以SpringBoot中不需再编写自定义注解&#xff0c;权限拦截&#xff0c;登录拦截&#xff0c;登录登出。Shiro 环境中有三个封装对象Subject &#xff0c;SecurityManager和Realms&#xff0c;SpringBoo…

Java核心技术【二十一】Java的I/O流处理:文件的读写操作

Java的I/O流处理&#xff1a;文件读写操作 【创作】 不易&#xff0c;【点赞】 是情义&#xff0c;【关注】 是动力&#xff0c;【收藏】 是回忆。 示例代码地址&#xff1a;https://gitee.com/code-in-java/csdn-blog.git 在Java编程中&#xff0c;输入/输出&#xff08;I/O&a…

PyTorch实现BERT预训练模型转化指南

huggingface官方的介绍&#xff1a; https://huggingface.co/transformers/converting_tensorflow_models.html 直接用命令行 把箭头处路径改为自己放原有tf版本预训练模型的路径 回车后会有一大堆提示&#xff0c;然后发现路径下多了一个bin文件&#xff0c;加上原本的config…

顺序结构 ( 六 ) —— 顺序结构实例 【互三互三】

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e;&#x1f680;所属专栏&#xff1a;C教程&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &am…

iNavFlight飞控固件学习-1《开发环境搭建》

目录 文章目录 目录摘要1.官网2.形成Linux开发环境工具2.1 简介2.2 相关工具2.2.1 Ubuntu / Debian系统配置命令2.2.2 Fedora系统配置命令2.2.3 Fedora系统配置命令 2.3 克隆存储库2.4 构建工具2.5 使用cmake2.6 构建固件2.7 清除2.8 cmake 缓存维护2.9 编译通过ninja2.10 更新…

js 日期比较大小

在JavaScript中&#xff0c;比较日期大小通常涉及将日期转换为时间戳&#xff08;自1970年1月1日以来的毫秒数&#xff09;&#xff0c;然后比较这些时间戳。这是因为直接比较两个Date对象可能不会按预期工作&#xff0c;特别是如果你试图了解哪个日期在另一个日期之前或之后。…

红酒与未来科技:传统与创新的碰撞

在岁月的长河中&#xff0c;红酒以其深邃的色泽、丰富的口感和不同的文化魅力&#xff0c;成为人类文明中的一颗璀璨明珠。而未来科技&#xff0c;则以其迅猛的发展速度和无限的可能性&#xff0c;领着人类走向一个崭新的时代。当红酒与未来科技相遇&#xff0c;一场传统与创新…

2024.07.03校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、提前批 | 中国兵器工业集团第二〇二研究所 | 提前批/招/聘暨/暑期/开放日 提前批 | 中国兵器工业集团第二〇二研究所 | 提前批招聘暨暑期开放日 2、夏令营 | 2024年南网数字集团“未来…

ADI新型充电器解决方案可实现电池堆电压和充电效率

就目前而言&#xff0c;这可能是生活中zui常见的问题了。世纪之交&#xff0c;电池&#xff08;尤其是基于锂离子的电池&#xff09;成本的降低和性能的提高&#xff0c;推动了电池供电的储能和便携式设备的稳步增长。此外&#xff0c;超级电容器由于具有独特的性质&#xff0c…

oppo25届秋招,快手25届技术人才专项计划内推

oppo25届秋招&#xff0c;快手25届技术人才专项计划内推 ①【OPPO】25届秋招开启&#xff01; 内推简历优先筛选&#xff01; &#x1f449;岗位类别&#xff1a;AI/算法类&#xff0c;软件类&#xff0c;硬件类&#xff0c;工程技术类&#xff0c;品牌策划类&#xff0c;设计类…

骨传导耳机最热门好用款推荐,选购骨传导耳机前不能忽略的六大细节

如今的社会在耳机种类方面可以说是越来越多&#xff0c;于是很多人在挑选的时候往往选择不到适合自己的一款耳机&#xff0c;尤其是在近些年来席卷耳机市场的骨传导耳机&#xff0c;开放耳道的设计在很多时候佩戴无异于是更加的适合&#xff0c;正好小编这边对于比较热门的几款…