/** * 浮动气泡窗口管理模块 * 提供创建和销毁浮动气泡窗口的功能 */ import { createApp } from 'vue' import MinWindow from '@/components/floatingBubble/index.vue' // 全局单例状态管理 let minWindowInstance = null // 组件实例引用 let minWindowApp = null // Vue应用实例 let container = null // DOM容器元素 /** * 创建并显示浮动气泡窗口 * @param {Object} props - 传递给浮动气泡组件的属性 * @returns {Object|null} 返回组件实例或null(服务端渲染时) */ export const showMinWindow1 = (props = {}) => { // 服务端渲染时直接返回 console.log('!process.client',!process.client) 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) minWindowApp = app minWindowInstance = app.mount(container) return minWindowInstance } catch (error) { console.error('创建浮动气泡时发生错误:', error) // 发生错误时确保清理资源 hideMinWindow1() return null } } /** * 销毁浮动气泡窗口 * 清理所有相关资源和DOM元素 */ export const hideMinWindow1 = () => { console.log('!minWindowApp && !container', !minWindowApp && !container); 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) { console.error('清理浮动气泡时发生错误:', error) } finally { // 重置所有状态 minWindowApp = null minWindowInstance = null container = null } }