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

<script setup>
import { watch, onUnmounted } from 'vue'
import { hideMinWindow1 } from './floating'

const props = defineProps({
  onClick: {
    type: Function,
  }
})

const route = useRoute()

// 监听路由变化，当进入首页时销毁气泡
watch(() => route.path, (newPath) => {
  if (newPath === '/') {
    hideMinWindow1()
  }
}, { immediate: true })

// 组件卸载时确保清理
onUnmounted(() => {
  hideMinWindow1()
})
</script>

<template>
  <van-floating-bubble
      v-if="route.path !== '/'"
      axis="xy"
      magnetic="x"
      :offset="{ x: 300, y: 50 }"
      @click="onClick"
  >
    回到直播
  </van-floating-bubble>
</template>

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