本文介绍如何在Uniapp中封装一个可复用的全局弹窗组件，并兼容Vue环境。通过Vue.prototype挂载全局方法，利用Vue.extend创建实例并手动挂载生成真实DOM，实现动态插入与移除。该方法适用于WebSocket或轮询场景下的即时信息提示与交互操作，支持跨页面调用显隐。
效果展示如下：
应用场景：
当系统对接WebSocket或执行轮询任务时，若需获取最新数据并在任意页面触发弹窗以执行后续操作，此方案可提供支持。
实现思路：
首先，封装通用的弹窗组件；其次，通过向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中导入的Vue对象。
2. Vue.extend(Invite)：此处Invite为导入的组件实例。该方法接收组件实例并返回组件的构造器，便于后续多次构建及操作该组件。
3. instance._props._specia = params：此步骤用于向新构建的组件内部传递props参数。
4. instance.vm = instance.$mount()：执行模板挂载，生成真实DOM，其效果与直接操作$el一致。
5. invite-box：这是组件最外层容器的CSS类名。
6. setTimeout：由于需要将元素添加到文档末尾，此处采用异步添加策略以确保DOM更新。
文件名为invite.js。
在main.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 = params
instance.vm = instance.$mount()
const InviteEle = document.body.lastElementChild
if(InviteEle.className === 'invite-box') return
setTimeout(() => document.body.appendChild(instance.vm.$el))
return instance
}
// 关闭邀请
Vue.prototype.$closeInvite = function() {
const instance = new Profile()
instance.vm = instance.$mount()
const InviteEle = document.body.lastElementChild
if(InviteEle.className !== 'invite-box') return
document.body.removeChild(InviteEle)
return instance
}
}
}第三步：使用方法。
// 导入invite.js
import invite from './utils/invite'
// 安装插件
Vue.use(invite)在任意组件中，调用this.$openInvite()即可弹出该组件，调用this.$closeInvite()则可关闭组件。
以上即为完整流程，使用方式是否简洁高效？
总结
至此，关于封装一个既可用于Vue也可用于Uniapp的全局弹窗组件的介绍已完成。如需了解更多Uniapp全局弹窗组件封装相关内容，建议搜索本站往期文章或继续阅读后续系列文章，感谢支持。
到此这篇关于封装一个vue中也可使用的uniapp的全局弹窗组件的文章就介绍到这了,更多相关uniapp全局弹窗组件封装内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！