60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<template>
|
|
<!-- 悬浮置顶按钮 -->
|
|
<Transition name="fade-slide">
|
|
<button
|
|
v-show="showScrollToTop"
|
|
aria-label="回到顶部"
|
|
class="fixed bottom-32 right-8 z-50 rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none
|
|
bg-primary/90 backdrop-blur-md border border-white/20
|
|
hover:bg-primary/95 hover:-translate-y-0.5 hover:scale-110 hover:shadow-xl
|
|
active:scale-95 focus:ring-4 focus:ring-primary/30
|
|
"
|
|
title="回到顶部"
|
|
@click="scrollToTop"
|
|
>
|
|
<UIcon class="w-6 h-6 text-white -rotate-45" name="i-lucide-rocket"/>
|
|
</button>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
// 响应式状态
|
|
const showScrollToTop = ref(false)
|
|
|
|
// 滚动监听函数
|
|
const handleScroll = () => {
|
|
showScrollToTop.value = window.scrollY > 300
|
|
}
|
|
|
|
// 滚动到顶部函数
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
|
|
// 组件挂载时添加滚动监听
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleScroll)
|
|
})
|
|
|
|
// 组件卸载时移除滚动监听
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 保留过渡动画 */
|
|
.fade-slide-enter-active,
|
|
.fade-slide-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.fade-slide-enter-from,
|
|
.fade-slide-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
</style> |