封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出

效果图：

场景：

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

思路：

1、先封装好要弹出的公共组件

2、向vue原型上挂载全局方法，拿到组件真实dom，从而对组件进行显隐操作

第一步：

创建一个公共组件，以下是组件全部的结构及样式，你需要把html中的两个image标签的路径换掉或者直接注释掉也行，html 和 css就不做解释了

invite.vue

<template><div class="invite-box"><view class="center-box"><image class="logo" src="/static/invite-logo.png"></image><image class="close" src="/static/close.png" v-on:click="$closeInvite"></image><view class="title">邀请函</view><view class="content">您好！您的朋友xxx邀请您对<text>“为什么小朋友到了一定年龄需要打疫苗？”</text>进行专家答疑，您是否接受？</view><view class="btn-group"><view class="invite-specia">邀请专家</view></view></view>     </div>
</template><script>export default {name: 'invite',props: {_specia: String},data() {return {}},mounted() {console.log('this.specia', this._specia);}
}
</script><style scoped lang='scss'>
.invite-box {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);z-index: 9999;.center-box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 622rpx;padding: 32rpx;border-radius: 16rpx;opacity: 1;background: rgba(255,255,255,1);.logo {position: absolute;top: -48rpx;left: 50%;transform: translateX(-50%);width: 136rpx;height: 144rpx;}.close {position: absolute;top: 24rpx;right: 24rpx;width: 48rpx;height: 48rpx;}.title {margin-top: 66rpx;text-align: center;color: rgba(0,0,0,1);font-size: 36rpx;font-weight: 500;font-family: "PingFang SC";letter-spacing: 0.6rpx;}.content {margin: 40rpx 0;font-size: 26rpx;font-family: "PingFang SC";letter-spacing: 0.6rpx;color: #343434;text {font-size: 32rpx;letter-spacing: 0.6rpx;color: rgba(69,108,255,1);}}.btn-group {display: flex;justify-content: center;padding: 0 16rpx;.invite-specia {width: 526rpx;height: 88rpx;line-height: 88rpx;border-radius: 16rpx;text-align: center;background: linear-gradient(-46.8deg, rgba(63,101,255,1) 0%, rgba(97,141,255,1) 100%);color: #fff;}}}
}
</style>

第二步：

注册一个全局函数，使用 Vue.prototype，首先创建一个js文件来存放你的全局方法，之后在main.js中引入挂载

以下代码中几个关键点：

1、install，参数可以拿到Vue函数，等价于 main.js 中 import 进来的 Vue

2、Vue.extend(Invite)，这里可以看到 Invite 是我导入的组件实例对象，该方法传入组件实例对象可以返回给你该组件的实例构造器，方便我们后续多次构建并操作该组件

3、instance._props._specia = params，这里只是向新构建的组件内传递一个props参数

4、instance.vm = instance.$mount()，挂载模板，生成真实dom，作用和$el一致

5、invite-box是组件最外层盒子的类名

6、setTimeout，因为要添加到最后，需要异步添加

invite.js

import Invite from '../components/invite.vue'export default {install(Vue) {const Profile = Vue.extend(Invite)// 弹出邀请Vue.prototype.$openInvite = function(params) {const instance = new Profile()instance._props._specia = paramsinstance.vm = instance.$mount()const InviteEle = document.body.lastElementChildif(InviteEle.className === 'invite-box') returnsetTimeout(() => document.body.appendChild(instance.vm.$el))return instance}// 关闭邀请Vue.prototype.$closeInvite = function() {const instance = new Profile()instance.vm = instance.$mount()const InviteEle = document.body.lastElementChildif(InviteEle.className !== 'invite-box') returndocument.body.removeChild(InviteEle)return instance}}
}

main.js

// 导入invite.js
import invite from './utils/invite'
// 安装插件
Vue.use(invite)

第三部：使用

在你任何组件内调用 this.$openInvite() 即可弹出组件，调用 this.$closeInvite()即可关闭组件

以上就是整个过程，是不是很好用呢

封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出相关推荐

uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
Vue回炉重造之封装一个实用的人脸识别组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
react-native TextInput组件在模拟器Simulator上鼠标聚焦后键盘不弹出
如题,react-native的TextInput组件在模拟器Simulator上鼠标聚焦后键盘不弹出 <TextInputstyle={styles.inputItem}onChangeTex ...
打印问题，需求是跳转到打印页面时直接弹出浏览器打印模式弹窗，当用户点击打印或取消打印时再关掉该打印页面并且返回到目标窗口源（父）页面并重载页面数据
可以使用window.print()配合 afterprint事件以及window.opener.location.reload() afterprint:在相关联的文档已开始打印或打印预览已关闭之后 ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
如何封装一个导入导出excel的组件
前言在日常作期间可能会遇到一些需要利用excel文件批量导入数据的项目,例如在我们管理用户的时候,如果新增用户较多一个个添加用户就会比较麻烦,所以可以自己封装一个可以导入excel表格的组件.使用者 ...
【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显
目录一:准备工作二:json文件数据例1 例2 三:先做个按钮做弹窗显示四:使用组件五:用到的变量六:初始化数据七:数据变更时的方法八:点击确认时的方法九:数据的回填这是选中效果 ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...

封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出

效果图：

场景：

思路：

第一步：

第二步：

第三部：使用

在你任何组件内调用 this.$openInvite() 即可弹出组件，调用 this.$closeInvite()即可关闭组件

封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出相关推荐

最新文章

热门文章