diff --git a/app/components/liveMinWindow/createMinWindow.js b/app/components/liveMinWindow/createMinWindow.js new file mode 100644 index 0000000..00b0e6d --- /dev/null +++ b/app/components/liveMinWindow/createMinWindow.js @@ -0,0 +1,56 @@ +import { createApp } from 'vue' +import MinWindow from '@/components/liveMinWindow/index.vue' + +let minWindowInstance = null + +// 创建悬浮窗 +export const showMinWindow = (snapshot, props = {}) => { + if (minWindowInstance) { + hideMinWindow() + } + + const container = document.createElement('div') + container.id = 'live-min-window-container' + document.body.appendChild(container) + + const defaultProps = { + snapshot, + onClose: () => hideMinWindow(), + initialPosition: { + top: '80px', + right: '16px' + } + } + + const app = createApp(MinWindow, { + ...defaultProps, + ...props + }) + + app.config.errorHandler = (err) => { + console.error('MinWindow Error:', err) + hideMinWindow() + } + + minWindowInstance = app.mount(container) + return minWindowInstance +} + +export const hideMinWindow = () => { + if (!minWindowInstance) return + + const el = minWindowInstance.$el + el.style.transform = 'translateY(100%)' + el.style.opacity = '0' + + const cleanup = () => { + el.parentNode?.remove() + minWindowInstance = null + } + + if (document.startViewTransition) { + document.startViewTransition(() => cleanup()) + } else { + setTimeout(cleanup, 300) + } +} \ No newline at end of file