vue全局挂载实现APP全局弹窗的示例代码

目录
  • 需求背景
  • 需求分析
  • 代码展示

需求背景

app端对接网页端的客服系统,在用户实现网页客户系统发起询问时,app不论在哪个页面都需要弹窗提示

需求分析

这个需求分为两步,一个是负责双向实时通信,一个是全局显示。双向实时通信我们可以利用socket来实现,具体内容不展开(后续看情况再出一篇),本文主要讲全局显示。

代码展示

首先是写个弹窗组件,这里给出个demo。如下

<template>
  <view
    class="transferPopup-wrap"
    style="transform: translateY(-200px)"
  >
    <view class="transferPopup-topContent">
      <text class="transferPopup-status">组内转接</text>
      <text class="transferPopup-from"
        >渠道组陈志成 将匿名客户03(厦门)转接给你</text
      >
    </view>
    <view class="transferPopup-reason">
      转接原因:该客户想购买服务,请及时接待!
    </view>
  </view>
</template>
export default {
  data () {
    return {
      timer: ''
    }
  },
  methods: {
  	openPopup () {
      setTimeout(() => {
        //transferPopup-wrap_in class的作用是translateY置为0
        document.querySelector('.transferPopup-wrap').classList.add('transferPopup-wrap_in')
      }, 0)
      //设置定时任务,三秒无操作自动消失
      this.timer = setTimeout(() => {
        this.closePopup()
      }, 3000)
    },
    closePopup () {
      //清除定时器
      clearTimeout(this.timer)
      //实现从下往上消失,隐藏后移除该元素
      document.querySelector('.transferPopup-wrap').classList.remove('transferPopup-wrap_in')
      setTimeout(() => {
        document.body.removeChild(document.querySelector('.transferPopup-wrap'))
      }, 550)
    }
  }
} 

注意有个transform: translateY(-200px)transferPopup-wrap_inclass,这是为了模拟弹窗出现时从上往下滑动的动画(参考微信qq)
接下来只要把这个组件挂载到vue原型,就可以在任何地方使用且无需引入,主要利用vue.extend首先,先在该组件同级目录建立index.js,内容如下

import vue from 'vue'

// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './index.vue'

// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)

toastComponent.install = function () {
  const toastDom = new ToastConstructor({})
  //挂载到添加的div上
  toastDom.$mount(document.createElement('div'))
  //div添加到body里
  document.body.appendChild(toastDom.$el)
  return toastDom
}

export default toastComponent

然后在main.js引入,即可实现

import Vue from 'vue'
import transferPopup from "@/components/transferPopup/index.js"; // 全局弹窗转接提示组件
Vue.prototype.$transferPopup = transferPopup.install;

然后在其他文件就可以通过this.$transferPopup().openPopup('组内转接')调用组件的方法

到此这篇关于vue全局挂载实现APP全局弹窗的示例代码的文章就介绍到这了,更多相关vue APP全局弹窗内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3.0如何在全局挂载对象和方法

    目录 如何在全局挂载对象和方法 1.官方的说明 2.更新后的挂载方法 3.在全局使用 4.但是应用中的this对象已经不再是一个Vue对象了 vue3全局挂载和使用 如何在全局挂载对象和方法 1.官方的说明 Vue3.x已经不支持直接Vue.prototype.$http = () => {}这种方式来挂载全局对象,这是由于globalVue不再是构造函数,因此不再支持该构造函数. 2.更新后的挂载方法 这个是官网的说明 所以现在我们的办法就是这样 import { createApp } fr

  • vue全局挂载实现APP全局弹窗的示例代码

    目录 需求背景 需求分析 代码展示 需求背景 app端对接网页端的客服系统,在用户实现网页客户系统发起询问时,app不论在哪个页面都需要弹窗提示 需求分析 这个需求分为两步,一个是负责双向实时通信,一个是全局显示.双向实时通信我们可以利用socket来实现,具体内容不展开(后续看情况再出一篇),本文主要讲全局显示. 代码展示 首先是写个弹窗组件,这里给出个demo.如下 <template> <view class="transferPopup-wrap" style

  • vue ssr+koa2构建服务端渲染的示例代码

    之前做了活动投放页面在百度.360等渠道投放,采用 koa2 + 模版引擎的方式.发现几个问题 相较于框架开发页面效率较低,维护性差 兼容性问题,在页面中添加埋点后发现有些用户的数据拿不到,排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器. 服务端渲染 服务端渲染和单页面渲染区别 查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的 html 结构.而单页面是一些 script 标签引入的js文件,最终将虚拟dom去挂在到 #app 容器上. @vue/c

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • vue实现导航菜单和编辑文本的示例代码

    导航菜单实例 <div id="main"> <!-- 激活的菜单样式为 active 类 --> <!-- 为了阻止链接在点击时跳转,我们使用了 "prevent" 修饰符 (preventDefault 的简称). --> <nav v-bind:class="active" v-on:click.prevent> <!-- 当菜单上的链接被点击时,我们调用了 makeActive 方法,

  • vue 使用class创建和清除水印的示例代码

    页面添加水印的方法有很多,以下举例使用class定义的方法进行水印内容渲染: 1.新建文件:WatermarkClass.js export default class WatermarkClass { constructor({id="watermarkID", str = "", fontSize = 18, width = 400, height = 400, fillStyle="#333333", opacity = 1 }) { th

  • Vue+NodeJS实现大文件上传的示例代码

    目录 整体思路 项目演示 前端界面 文件切片 hash计算 查询切片状态 切片上传(断点续传) 文件总体上传进度 合并文件 优化 请求并发数控制 hash值计算优化 常见的文件上传方式可能就是new一个FormData,把文件append进去以后post给后端就可以了.但如果采用这种方式来上传大文件就很容易产生上传超时的问题,而且一旦失败还得从新开始,在漫长的等待过程中用户还不能刷新浏览器,不然前功尽弃.因此这类问题一般都是通过切片上传. 整体思路 将文件切成多个小文件 hash计算,需要计算一

  • vue中el-upload上传图片到七牛的示例代码

    一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

  • vue实现禁止浏览器记住密码功能的示例代码

    查找资料 网上查到的一些方法: 使用 autocomplete="off"(现代浏览器许多都不支持) 使用 autocomplete="new-password" 在真正的账号密码框之前增加相同 name 的 input 框 使用 readonly 属性,在聚焦时移除该属性 初始化 input 框的 type 属性为 text,聚焦时修改为 password 使用 type="text",手动替换文本框内容为星号 "*" 或者

随机推荐