diff --git a/app/components/floatingBubble/floating.js b/app/components/floatingBubble/floating.js index d28f994..110e965 100644 --- a/app/components/floatingBubble/floating.js +++ b/app/components/floatingBubble/floating.js @@ -2,33 +2,63 @@ import { createApp } from 'vue' import MinWindow from '@/components/floatingBubble/index.vue' let minWindowInstance = null -let minWindowApp = null // 新增:保存应用实例 +let minWindowApp = null +let container = null // 创建悬浮窗 -export const showMinWindow1 = ( props = {}) => { - if (process.client){ - const container = document.createElement('div') - container.className = 'floating-bubble-container' // 添加类名 - document.body.appendChild(container) - const app = createApp(MinWindow, { - ...props - }) +export const showMinWindow1 = (props = {}) => { + if (!process.client) return - minWindowApp = app // 保存应用实例 - minWindowInstance = app.mount(container) + // 如果在首页,不创建实例并销毁现有实例 + if (window?.$nuxt?.$route?.path === '/') { + hideMinWindow1() + return null + } + + // 如果已经存在实例,直接返回该实例 + if (minWindowInstance) { return minWindowInstance } + + // 确保清理旧的容器 + 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) + + const app = createApp(MinWindow, { + ...props + }) + + minWindowApp = app + minWindowInstance = app.mount(container) + return minWindowInstance } export const hideMinWindow1 = () => { if (!minWindowApp) return - const cleanup = () => { - minWindowApp.unmount() // 使用应用实例的unmount方法 - const container = document.querySelector('.floating-bubble-container') // 假设您的容器有这个类名 - container && document.body.removeChild(container) + + try { + minWindowApp.unmount() + if (container && document.body.contains(container)) { + document.body.removeChild(container) + } + } catch (e) { + console.error('清理浮动气泡时出错:', e) + } finally { + // 确保状态被重置 minWindowApp = null minWindowInstance = null + container = null + + // 额外清理可能残留的容器 + const existingContainer = document.querySelector('.floating-bubble-container') + if (existingContainer) { + document.body.removeChild(existingContainer) + } } - - cleanup() } \ No newline at end of file diff --git a/app/components/floatingBubble/index.vue b/app/components/floatingBubble/index.vue index 41ef4b9..84d9824 100644 --- a/app/components/floatingBubble/index.vue +++ b/app/components/floatingBubble/index.vue @@ -1,16 +1,31 @@