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

news2024/9/17 9:01:15

效果图:

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

在项目目录下新建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

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

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

相关文章

前端埋点数据收集和数据上报

原文地址 什么是埋点 学名叫时间追踪(Event Tracking), 主要针对用户行为或者业务过程进行捕获&#xff0c;处理和发送相关技术及实施过程. 埋点是数据领域的一个专业术语&#xff0c;也是互联网领域的俗称&#xff0c;是互联网领域的俗称 埋点是产品数据分析的基础&#xf…

漏洞扫描器之XRAY的安装及破解

XRAY简介 xray 是一款功能强大的安全评估工具&#xff0c;由多名经验丰富的一线安全从业者呕心打造而成&#xff0c;主要特性有&#xff1a; 检测速度快&#xff1a;发包速度快 ; 漏洞检测算法高效。 支持范围广&#xff1a;大至 OWASP Top 10 通用漏洞检测&#xff0c;小至…

Nginx上配置多个网站

一、需求描述 我们只有一台安装了Nginx的服务器,但是我们需要实现在这台服务器上部署多个网站,用以对外提供服务。 二、Nginx上配置多个网站分析 一般网站的格式为:【http://ip地址:端口号/URI】(比如:http://192.168.3.201:80),IP地址也可用域名表示;那么要实现在Nginx…

Nuxt框架中内置组件详解及使用指南(五)

title: Nuxt框架中内置组件详解及使用指南&#xff08;五&#xff09; date: 2024/7/10 updated: 2024/7/10 author: cmdragon excerpt: 摘要&#xff1a;本文详细介绍了Nuxt框架中和组件的使用方法与配置&#xff0c;包括安装、基本用法、属性详解、示例代码以及高级功能如…

vscode如何自动补全-cnblog

打开设置 输入save选项选afterDelay 详情介绍 afterDelay 这个是在多少毫秒后自动保存。 onFocusChange 编辑器失去焦点的时候保存 onWindowChange 这个是窗口失去焦点的时候保存 自动保存时间设置 Auto Save Delay默认保存时间是1000毫秒,就是1秒,设置成500毫秒可以对应大…

PaintsUndo - 一张照片一键生成绘画过程视频 本地一键整合包下载

这就是ControlNet作者张吕敏大佬的新作&#xff0c;PaintsUndo。只要你有一张图片&#xff0c;PaintsUndo 就能让它变成完整的绘画过程视频。这科技&#xff0c;绝了。 你有没有想过&#xff0c;一张静态图片也能变成一个绘画教程? PaintsUndo 就是这么神奇。你只需要提供一…

C++ 现代教程三

// 模板参数类型区分 template <class T> static std::string cppdemangle() {std::string s{cppdemangle(typeid(std::remove_cv_t<std::remove_reference_t<T>>))};if (std::is_const_v<std::remove_reference_t<T>>)s " const";if…

商家转账到零钱申请必过攻略

商家使用微信支付的“商家转账到零钱”功能需要满足一定的条件&#xff0c;并遵循特定的开通步骤。由于人工审核提高了申请门槛&#xff0c;多数商家在申请中需要一定的操作指南才能开通&#xff0c;以下是我们上万次成功开通“商家转账到零钱”功能的经验总结&#xff0c;希望…

夏令营入门组day1

一. 题目 二. 初步思路 因为是解决区间上的问题&#xff0c;很容易想到用前缀和来解决。前缀和是o ( n ) 的时间复杂度&#xff0c;但后续枚举两个端点要 o ( n^2 )&#xff0c;对于2e10的数据&#xff0c;超时。 for (int i 1; i < n; i )for (int j i; j <n; j ){if…

小程序问题

1.获取节点 wx.createSelectorQuery() wx.createSelectorQuery().in(this) //组件中加in(this)&#xff0c;不然获取不到 2.使用实例 wx.createSelectorQuery().in(this).select(#share).fields({node: true,size: true}).exec(async (res) > {const canvas res[0].node;…

接上一回C++:补继承漏洞+多态原理(带图详解)

引子&#xff1a;接上一回我们讲了继承的分类与六大默认函数&#xff0c;其实继承中的菱形继承是有一个大坑的&#xff0c;我们也要进入多态的学习了。 注意&#xff1a;我学会了&#xff0c;但是讲述上可能有一些不足&#xff0c;希望大家多多包涵 继承复习&#xff1a; 1&…

绿洲生态OAS:探索数字新绿洲,共创价值新纪元

绿洲生态OAS的盛大启航 在数字经济的浩瀚星海中&#xff0c;一颗名为绿洲生态OAS的璀璨明珠即将于7月13日全面正式上线。这是一场对未来的探索&#xff0c;一次对财富自由的勇敢追求。绿洲生态&#xff0c;简称OAS&#xff0c;以其独特的积分发行规划&#xff0c;吸引了无数投…

电脑工具箱神器——uTools

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 很多人脑子里都有一些一个月只用两三次的软件&#xff0c;这些软件就这样积满了灰尘&#xff0c;需要的时候又不知道去哪里找。uTools 完美地解决…

C语言补充:指针的基础理解

1.int* 和 char* 的修改字节上的区别及指针的运算 先看两段代码&#xff1a; int a 0x11223344; int* pa &a; *pa 0;int a 0x11223344; char* pa &a; *pa 0;这里我们不难发现对于指针的改变其实是取决于对应的指针类型的&#xff0c;32位环境下char就是一个字节…

干货:如何高效检索和阅读文献

前言:Hello大家好,我是小哥谈。高效检索和阅读文献是科研过程中非常重要的一环,它能够帮助我们快速找到所需的信息并进行深入的学习和理解。本文就说明一下如何高效检索和阅读文献。🌈 目录 🚀1.炼成“高搜商” 🍀🍀1.1 文献检索 🍀🍀1.2 ⽂献树思维 �…

c++初阶知识——类和对象(1)

目录 1.类和对象 1.1 类的定义 1.2 访问限定符 1.3 类域 2.实例化 2.1 实例化概念 2.2 对象大小 内存对齐规则 3.this指针 1.类和对象 1.1 类的定义 &#xff08;1&#xff09;class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xf…

数据(图像)增广

一、数据增强 1、增加一个已有数据集&#xff0c;使得有更多的多样性&#xff0c;比如加入不同的背景噪音、改变图片的颜色和形状。 2、增强数据是在线生成的 3、增强类型&#xff1a; &#xff08;1&#xff09;翻转 &#xff08;2&#xff09;切割 &#xff08;3&#xf…

AI大模型API:开启智能应用的新纪元

AI大模型API是当今技术领域的重要突破&#xff0c;它们以其卓越的性能和强大的计算能力引领着人工智能的发展。这些API不仅仅是一种技术工具&#xff0c;更是推动智能化时代的核心驱动力。通过AI大模型类API&#xff0c;我们可以利用先进的算法和深度学习模型&#xff0c;实现各…

k8s NetworkPolicy

Namespace 隔离 默认情况下&#xff0c;所有 Pod 之间是全通的。每个 Namespace 可以配置独立的网络策略&#xff0c;来 隔离 Pod 之间的流量。 v1.7 版本通过创建匹配所有 Pod 的 Network Policy 来作为默认的网络策略 默认拒绝所有 Pod 之间 Ingress 通信 apiVersion: …

heic格式转化jpg?三种方法轻松解决Heic图片转换

HEIC是苹果IOS 11系统推出的图片格式&#xff0c;它采用了最新的图片处理技术&#xff0c;在不损坏图片质量的情况下&#xff0c;减少占用系统。很多使用mac系统的小伙伴都有这样的困惑&#xff0c;如何将HEIC格式的图片转换成JPG呢&#xff1f;小编今天给大家分享3种适用的hei…