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 方法二…

算法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…

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 更新…

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

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

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

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

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

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

社交App iOS审核中的4.3问题:深入分析与解决策略

社交App审核中的4.3问题&#xff1a;深入分析与解决策略 在iOS应用开发和审核过程中&#xff0c;开发者经常会遇到苹果审核4.3问题。这一问题往往涉及应用的设计和内容重复性&#xff0c;导致应用被拒绝上架。为了帮助开发者更好地理解和解决这一问题&#xff0c;本文将对4.3问…

动漫3d模型设计需要注意什么?---模大狮模型网

设计动漫3D模型时&#xff0c;有几个方面需要注意&#xff1a; 保持角色风格一致性&#xff1a; 动漫通常有独特的风格和美学&#xff0c;设计时要确保模型与所代表的角色或作品的整体风格相符。注意保持线条和比例的一致性&#xff0c;使模型能够忠实地呈现原作的特点。 注重…

springboot餐饮管理系统-计算机毕业设计源码43667

摘 要 在信息化、数字化的时代背景下&#xff0c;餐饮行业面临着前所未有的挑战与机遇。为了提高运营效率、优化顾客体验&#xff0c;餐饮企业亟需一套高效、稳定且灵活的管理系统来支撑其日常运营。基于Spring Boot的餐饮管理系统应运而生&#xff0c;成为餐饮行业数字化转型的…

Python基础教学之一:入门篇——迈入编程世界的第一步

Python基础教学之一&#xff1a;入门篇——迈入编程世界的第一步 一、Python简介&#xff1a;历史与现状 Python&#xff0c;一种解释型、高级和通用的编程语言&#xff0c;由Guido van Rossum在1989年圣诞节期间创造&#xff0c;并于1991年首次发布。设计哲学强调代码的可读性…

论文降痕降重全攻略:从技巧到工具,助你轻松应对学术挑战

AIGC降重工具&#xff1a;快速降低论文查重率 高查重率是许多毕业生的困扰。通常&#xff0c;高查重率源于过度引用未经修改的参考资料和格式错误。传统的降重方法&#xff0c;如修改文本和增添原创内容&#xff0c;虽必要但耗时且成效不一。 鉴于此&#xff0c;应用AI工具进…

【企业级监控】源码部署Zabbix与监控主机

Zabbix企业级分布式监控 文章目录 Zabbix企业级分布式监控资源列表基础环境一、LNMP环境搭建&#xff08;在zbx主机上&#xff09;1.1、配置Yum仓库1.1.1、下载阿里云的仓库文件1.2.2、安装PHP7的仓库1.2.3、生成Mariadb10.11的仓库文件1.2.4、快速重建Yum缓存 1.2、安装PHP7.4…

请求取消(多种)

XMLHttpRequest XMLHttpRequest 可以使用 abort() 方法来实现请求取消。 const xhr new XMLHttpRequest();xhr.open(GET, http://localhost:3000/api/txt);xhr.timeout 2;xhr.ontimeout function () {xhr.abort();console.error(请求超时&#xff0c;已中断);};xhr.onload …