47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<div class="aa-backtop" :class="{ 'is-visible': visible, 'aa-no-ring': !showRing }"
|
|
role="button" aria-label="返回顶部" @click="toTop">
|
|
<svg viewBox="0 0 44 44" v-if="showRing">
|
|
<circle class="aa-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
|
|
<circle class="aa-backtop-ring-fg" cx="22" cy="22" r="20" fill="none" stroke-width="2"
|
|
:style="{ strokeDasharray: circumference, strokeDashoffset: offset }" />
|
|
</svg>
|
|
<span class="aa-backtop-arrow">↑</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
const props = defineProps({
|
|
threshold: { type: Number, default: 400 },
|
|
showRing: { type: Boolean, default: true }
|
|
});
|
|
|
|
const r = 20;
|
|
const visible = ref(false);
|
|
const progress = ref(0);
|
|
const circumference = 2 * Math.PI * r;
|
|
const offset = computed(() => circumference * (1 - progress.value));
|
|
|
|
function onScroll() {
|
|
const st = window.pageYOffset || document.documentElement.scrollTop;
|
|
const max = document.documentElement.scrollHeight - window.innerHeight;
|
|
progress.value = max > 0 ? st / max : 0;
|
|
visible.value = st > props.threshold;
|
|
}
|
|
function toTop() {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
onScroll();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', onScroll);
|
|
});
|
|
</script>
|
|
|
|
<style src="./BackToTop.css"></style>
|