You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<!-- 返回顶部按钮 -->
|
|
<template>
|
|
<Transition
|
|
enter-active-class="transition duration-300 ease-out"
|
|
leave-active-class="transition duration-200 ease-in"
|
|
enter-from-class="opacity-0 translate-y-2"
|
|
enter-to-class="opacity-100 translate-y-0"
|
|
leave-from-class="opacity-100 translate-y-0"
|
|
leave-to-class="opacity-0 translate-y-2"
|
|
>
|
|
<div
|
|
v-show="showButton"
|
|
class="fixed right-10 bottom-15 size-9.5 flex items-center justify-center cursor-pointer border border-g-300 rounded-md transition duration-300 hover:bg-g-200"
|
|
@click="scrollToTop"
|
|
>
|
|
<FaSvgIcon icon="ri:arrow-up-wide-line" class="text-g-500 text-lg" />
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useScroll } from "@vueuse/core";
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { useCommon } from "@/hooks/core/useCommon";
|
|
|
|
defineOptions({ name: "FaBackToTop" });
|
|
|
|
const { scrollToTop } = useCommon();
|
|
|
|
const showButton = ref(false);
|
|
const scrollThreshold = 300;
|
|
|
|
onMounted(() => {
|
|
const scrollContainer =
|
|
document.getElementById("app-scroll-main") ?? document.getElementById("app-main");
|
|
if (scrollContainer) {
|
|
const { y } = useScroll(scrollContainer);
|
|
watch(y, (newY: number) => {
|
|
showButton.value = newY > scrollThreshold;
|
|
});
|
|
}
|
|
});
|
|
</script>
|