100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
/**
|
||
* 浮动气泡窗口管理模块
|
||
* 提供创建和销毁浮动气泡窗口的功能
|
||
*/
|
||
import { createApp } from 'vue'
|
||
import MinWindow from '@/components/floatingBubble/index.vue'
|
||
import { createI18n } from 'vue-i18n'
|
||
|
||
// 全局单例状态管理
|
||
let minWindowInstance = null // 组件实例引用
|
||
let minWindowApp = null // Vue应用实例
|
||
let container = null // DOM容器元素
|
||
|
||
/**
|
||
* 创建并显示浮动气泡窗口
|
||
* @param {Object} props - 传递给浮动气泡组件的属性
|
||
* @returns {Object|null} 返回组件实例或null（服务端渲染时）
|
||
*/
|
||
export const showMinWindow1 = (props = {}) => {
|
||
// 服务端渲染时直接返回
|
||
if (!process.client) return null
|
||
|
||
// 如果实例已存在，避免重复创建
|
||
if (minWindowInstance) {
|
||
return minWindowInstance
|
||
}
|
||
|
||
try {
|
||
// 清理可能存在的残留容器
|
||
const existingContainer = document.querySelector('.floating-bubble-container')
|
||
if (existingContainer) {
|
||
document.body.removeChild(existingContainer)
|
||
}
|
||
|
||
// 创建新的容器元素
|
||
container = document.createElement('div')
|
||
container.className = 'floating-bubble-container'
|
||
document.body.appendChild(container)
|
||
|
||
// 创建Vue应用实例
|
||
const app = createApp(MinWindow, props)
|
||
|
||
// 获取当前 Nuxt 应用的 i18n 配置
|
||
const nuxtApp = window?.__nuxt
|
||
const i18nConfig = nuxtApp?.$i18n?.options || {
|
||
legacy: false,
|
||
locale: 'en',
|
||
messages: {}
|
||
}
|
||
|
||
// 为独立组件创建 i18n 实例
|
||
const i18n = createI18n(i18nConfig)
|
||
|
||
// 安装 i18n
|
||
app.use(i18n)
|
||
|
||
minWindowApp = app
|
||
minWindowInstance = app.mount(container)
|
||
|
||
return minWindowInstance
|
||
} catch (error) {
|
||
// 发生错误时确保清理资源
|
||
hideMinWindow1()
|
||
return null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 销毁浮动气泡窗口
|
||
* 清理所有相关资源和DOM元素
|
||
*/
|
||
export const hideMinWindow1 = () => {
|
||
|
||
|
||
if (!minWindowApp && !container) return
|
||
|
||
try {
|
||
// 卸载Vue应用
|
||
if (minWindowApp) {
|
||
minWindowApp.unmount()
|
||
}
|
||
|
||
// 移除DOM容器
|
||
if (container && document.body.contains(container)) {
|
||
document.body.removeChild(container)
|
||
}
|
||
|
||
// 清理可能残留的其他容器
|
||
const existingContainer = document.querySelector('.floating-bubble-container')
|
||
if (existingContainer) {
|
||
document.body.removeChild(existingContainer)
|
||
}
|
||
} catch (error) {
|
||
} finally {
|
||
// 重置所有状态
|
||
minWindowApp = null
|
||
minWindowInstance = null
|
||
container = null
|
||
}
|
||
} |