<!-- 悬浮按钮 -->
<template>
  <transition name="slide-up">
    <v-fab
      v-if="showFab"
      :class="fabClass"
      color="primary"
      icon="mdi-arrow-up"
      @click="scrollToTop"
    ></v-fab>
  </transition>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 定义组件名称
defineOptions({
  name: "VtkFab",
  inheritAttrs: false,
});

// 控制悬浮按钮显示状态
const showFab = ref(false)
// 自定义类名用于样式调整
const fabClass = ref('scroll-to-top-fab')

// 监听滚动事件
const handleScroll = () => {
  showFab.value = window.scrollY > 100
}

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载前移除监听
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.scroll-to-top-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1004;
}

/* 滑动动画 */
.slide-up-enter-active {
  transition: all 0.2s ease-out;
}

.slide-up-leave-active {
  transition: all 0.2s ease-in;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>