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>
|