feat: 回到顶部按钮

wsvaio · Apr 17, 2024 · 757d509 · 757d509
1 parent 2c9caba
commit 757d509
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/layouts/default/index.vue b/layouts/default/index.vue
@@ -3,6 +3,8 @@ import BannerView from "./views/banner/index.vue";
 import MainView from "./views/main/index.vue";
 
 defineProps<{ bannerHeight?: string; bannerTitle: string }>();
+
+const { y } = useWindowScroll();
 </script>
 
 <template>
@@ -17,4 +19,15 @@ defineProps<{ bannerHeight?: string; bannerTitle: string }>();
 
     <slot />
   </main-view>
+  <transition name="fade">
+    <button
+      v-if="y >= 512" pos="fixed right-1em bottom-1em" z="10" border="none"
+      text="2em"
+      class="i-fxemoji:rocket"
+      p="0"
+      rotate="[-45deg]"
+      cursor="pointer"
+      @click="y = 0"
+    />
+  </transition>
 </template>