uniApp封装全局弹窗供消息推送使用

最新推荐文章于 2025-09-20 14:54:44 发布

原创

最新推荐文章于 2025-09-20 14:54:44 发布 · 3.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #websocket #vue #前端

本文介绍了如何在Vue.js应用中封装一个全局的弹窗组件，用于在任意页面展示信息。首先，创建了一个名为`webview.vue`的组件，包含关闭按钮、标题和内容区域。然后，在`invite.js`中注册全局函数`$openInvite`和`$closeInvite`，用于弹出和关闭组件，并通过Vue.prototype挂载。在`main.js`中引入并挂载这个插件。最后，可以在任何组件中调用这两个全局方法来显示或关闭弹窗，实现跨页面的交互。示例中展示了如何在接收消息时调用弹窗。

场景：

当对接websocket时，或者mtqq推送也好，需要获取到最新的信息，并且在任何页面弹出一个组件进行后续操作

第一步：

在 components 文件夹中新建一个组件 webview.vue

<template>
  <view class="invite-box">
    <view class="center-box">
      <view class="close" src="/static/close.png" v-on:click="$closeInvite">×</view>
      <view class="title">邀请函</view>
      <view class="content">您好！您的朋友xxx邀请您对<text>“为什么小朋友到了一定年龄需要打疫苗？”</text>进行专家答疑，您是否接受？</view>
      <view class="btn-group">
        <view class="invite-specia">邀请专家</view>
      </view>
    </view>     
  </view>
</template>
 
<script>
 
export default {
  name: 'invite',
 
  props: {
    _specia: String
  },
 
  data() {
    return {}
  },
 
  mounted() {
    console.log('组件内推送的消息', this._specia);
  }
}
</script>
 
<style scoped lang='scss'>
.invite-box {
  position: fix