55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
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> |