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 = false
    document.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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

为什么广告需要教育视频

教育视频作为一种广告工具越来越受欢迎&#xff0c;因为它们能够有效地传达信息并吸引观众的注意力。以下是需要此类视频的几个关键原因&#xff1a; 提高参与度 互动性&#xff1a;教育视频吸引注意力&#xff0c;让观众长时间参与&#xff0c;并让他们参与学习过程。产品演…

具有 0.5V 超低输入电压的 3A 升压转换器TPS61021

1 特性 输入电压范围&#xff1a;0.5V 至 4.4V 启动时的最小输入电压为 0.9V 可设置的输出电压范围&#xff1a;1.8V 到 4.0V 效率高达 91%&#xff08;VIN 2.4V、VOUT 3.3V 且 IOUT 1.5A 时&#xff09; 2.0MHz 开关频率 IOUT > 1.5A&#xff0c;VOUT 3.3V&#xff08;V…

【C语言】C语言-学生籍贯信息记录系统(源码+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

使用Docker制作python项目镜像

各docker桌面版本集合&#xff1a;如果提示新版本系统不支持&#xff0c;可下载旧版本 我也分享在下面。 链接: https://pan.baidu.com/s/1HvaO2wOIE3pNE0bM7Qm3sA?pwdg7ky 提取码: g7ky –来自百度网盘超级会员v2的分享 来源参考&#xff1a;https://zhuanlan.zhihu.com/p/65…

C++|智能指针

目录 引入 一、智能指针的使用及原理 1.1RAII 1.2智能指针原理 1.3智能指针发展 1.3.1std::auto_ptr 1.3.2std::unique_ptr 1.3.3std::shared_ptr 二、循环引用问题及解决方法 2.1循环引用 2.2解决方法 三、删除器 四、C11和boost中智能指针的关系 引入 回顾上…

休息时间c++

题目描述 小杨计划在某个时刻开始学习&#xff0c;并决定在学习k秒后开始休息。 小杨想知道自己开始休息的时刻是多少。 输入 前三行每行包含一个整数&#xff0c;分别表示小杨开始学习时刻的时h、分m、秒s(h&#xff0c;m&#xff0c;s的值符合1≤h≤12,0≤m≤59,0≤s≤59)…

外贸展示型网站设计

清洁能源风能设备wordpress外贸公司模板 风能设备wordpress外贸公司模板&#xff0c;做新能源网通设备的公司网站模板。 https://www.jianzhanpress.com/?p3606 钢材wordpress外贸公司模板 金属钢材wordpress外贸公司模板&#xff0c;做金属成品贸易公司的企业网站模板。 …

智慧营区人员考勤管理系统|DW-S406系统实现无感考勤

智慧营区人员管理系统&#xff08;DW-S406系统&#xff09;通过建设人员基本信息管理功能&#xff0c;实现人力资源可视化、规范化管理&#xff0c;使人力资源管理工作决策的高效化、制度化得到有力保障&#xff0c;真正达到集中管理、集权管理的目标。主要实现营区人员管理、访…

Apache Dubbo与Nacos整合过程

Dubbo服务发现 Dubbo 提供的是一种 Client-Based 的服务发现机制&#xff0c;依赖第三方注册中心组件来协调服务发现过程&#xff0c;支持常用的注册中心如 Nacos、Consul、Zookeeper 等。 以下是 Dubbo 服务发现机制的基本工作原理图&#xff1a; 服务发现包含提供者、消费者…

C++:重定义

派生类和基类的同名成员问题 派生类中再实现一个基类中的方法会怎样 (1)代码实验&#xff1a;派生类和基类中各自实现一个内容不同但函数原型完全相同的方法&#xff0c;会怎么样 (2)结论&#xff1a;基类对象调用的是基类的方法&#xff0c;派生类对象调用执行的是派生类中重…

AWS认证考试流程:从准备到通过

AWS认证是IT行业中备受推崇的专业资格认证之一&#xff0c;它不仅可以验证您的AWS技能&#xff0c;还能提升您的职业竞争力。本文将为您详细介绍AWS认证考试的完整流程&#xff0c;从初步准备到最终通过认证。 选择适合的认证级别 AWS提供多个级别的认证&#xff0c;包括&…

OWASP ZAP

OWASP ZAP简介 开放式Web应用程序安全项目&#xff08;OWASP&#xff0c;Open Web Application Security Project&#xff09;是一个组织&#xff0c;它提供有关计算机和互联网应用程序的公正、实际、有成本效益的信息。ZAP则是OWASP里的工具类项目&#xff0c;也是旗舰项目&a…

DP(2) | Java | LeetCode 62, 63, 343, 96 做题总结(96 未完)

62.不同路径 我的代码&#xff08;报错&#xff09; 写的过程中感到很迷惑的点&#xff1a;①二维数组和这道题目的对应弄不清除&#xff0c;m n的初始化 是 dp[m][n] 还是 dp[n][m] ② class Solution {public int uniquePaths(int m, int n) {int[][]dp new int[m1][n1];d…

JavaScript(9)——作用域的一些问题

如果在函数内部&#xff0c;变量没有声明直接赋值&#xff0c;也会当做全局变量看。强烈不推荐&#xff01;&#xff01; function op() {num 80}op()console.log(num) 在不同作用域下&#xff0c;可能存在变量命名冲突的情况&#xff1a; let num 10 function fn(){let num…

【PTA天梯赛】L1-003 个位数统计(15分)

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法刷题 &#x1f43e;或许会很慢&#xff0c;但是不可以停下来&#x1f43e; 文章目录 题目题解总结 题目 题目链接 题解 使用string把长度达1000位的数字存起来开一个代表个位数的数组 a[11]倒序计算最后一位&#xff0c;…

SQL基础-DQL 小结

SQL基础-DQL 小结 学习目标&#xff1a;学习内容&#xff1a;SELECTFROMWHEREGROUP BYHAVINGORDER BY运算符ASC 和 DESC 总结 学习目标&#xff1a; 1.理解DQL&#xff08;Data Query Language&#xff09;的基本概念和作用。 2.掌握SQL查询的基本语法结构&#xff0c;包括SEL…

PHP 安装Memcached 扩展 PHP使用Memcache

memcache扩展下载 访问官网&#xff1a;https://pecl.php.net/package/memcache&#xff0c;下载合适的memcache版本的安装包&#xff0c;注意要与php版本相匹配。 1、查看运行环境php版本,可以运行以下代码 <?php phpinfo(); ?>2、查看版本信息以及是否支持多线程…

Google登录时人机身份验证的图片类型和通过的经验建议,以及一些常见问题

很多朋友在登录谷歌账号时&#xff0c;都遇到过要求人机身份验证的步骤&#xff0c;而且有一些时候人机身份验证这个步骤很让人纠结&#xff0c;甚至压根就出不来具体的验证图片&#xff0c;或者花了十几分钟、几十分钟都过不去。 所以今天GG账号服务就来为您解析一下谷歌登录…

论文学习_An Empirical Study of Deep Learning Models for Vulnerability Detection

1. 引言 研究背景:近年来,深度学习漏洞检测工具取得了可喜的成果。最先进的模型报告了 0.9 的 F1 分数,并且优于静态分析器。结果令人兴奋,因为深度学习可能会给软件保障带来革命性的变化。因此,IBM、谷歌和亚马逊等行业公司非常感兴趣,并投入巨资开发此类工具和数据集。…

【Ubuntu-18.04.6 LTS (Bionic Beaver)】串口无法root登录解决方案

root用户无法再窗口登录 用户界面登录提示 soory that didnot work 解决方案 GDM 配置 /etc/gdm3/custom.conf 中增加或删除注释 [security] AllowRoottrue重启服务 service gdm restart确认 PAM 配置 GDM 使用 PAM 进行认证&#xff0c;可能 PAM 配置中限制了 root 登录…