liveh5-nuxt/app/components/floatingBubble/index.vue

<!--
  浮动气泡组件
  提供一个可拖拽的浮动按钮，支持自定义点击事件和自动销毁功能
-->
<script setup>
import { watch, onUnmounted } from 'vue'
import { hideMinWindow1 } from './floating'

// 从 nuxt/app 导入 useNuxtApp
const { $i18n } = useNuxtApp()

// 替换原来的 useI18n
const t = (key) => $i18n.t(key)

const props = defineProps({
  /** 点击气泡时的回调函数 */
  onClick: {
    type: Function,
    default: () => {}
  },
  /** 气泡文本内容（可选，默认使用国际化文本） */
  text: {
    type: String,
    default: null
  }
})

const route = useRoute()

// 路由变化监听器：当用户返回首页时自动销毁气泡

// 组件卸载时自动清理资源
onUnmounted(() => {
  hideMinWindow1()
})
</script>

<template>
  <van-floating-bubble
    axis="xy"
    magnetic="x"
    :offset="{ x: 300, y: 50 }"
    @click="onClick"
  >
    {{ text || t('floatingBubble.backToLive') }}
  </van-floating-bubble>
</template>

<style>
.van-floating-bubble {
  width: 70px;
  height: 70px;
  border-radius: 5px!important;
}
</style>