From 97d36012ff5a9ad4fcc4fc170cc5db5ca7e2fcaf Mon Sep 17 00:00:00 2001
From: ElsaOOo <yjjjng0901@126.com>
Date: Mon, 11 Oct 2021 10:07:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(backToTop):=20=E7=BB=99=E7=AB=99?=
 =?UTF-8?q?=E7=82=B9=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=B8=AA=20=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E9=A1=B6=E9=83=A8=20=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-theme/components/BackToTop.vue      | 102 ++++++++++++++++++
 .../devui-theme/components/Page.vue           |   2 +
 2 files changed, 104 insertions(+)
 create mode 100644 docs/.vitepress/devui-theme/components/BackToTop.vue

diff --git a/docs/.vitepress/devui-theme/components/BackToTop.vue b/docs/.vitepress/devui-theme/components/BackToTop.vue
new file mode 100644
index 00000000..185f5968
--- /dev/null
+++ b/docs/.vitepress/devui-theme/components/BackToTop.vue
@@ -0,0 +1,102 @@
+<template>
+  <transition name="fade">
+    <svg
+      v-if="show"
+      class="go-to-top"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 49.484 28.284"
+      @click="scrollToTop"
+    >
+      <g transform="translate(-229 -126.358)">
+        <rect
+          fill="currentColor"
+          width="35"
+          height="5"
+          rx="2"
+          transform="translate(229 151.107) rotate(-45)"
+        />
+        <rect
+          fill="currentColor"
+          width="35"
+          height="5"
+          rx="2"
+          transform="translate(274.949 154.642) rotate(-135)"
+        />
+      </g>
+    </svg>
+  </transition>
+</template>
+
+<script>
+import { debounce } from 'lodash-es'
+export default {
+  name: 'BackToTop',
+  props: {
+    threshold: {
+      type: Number,
+      default: 300,
+    },
+  },
+  data() {
+    return {
+      scrollTop: null,
+    }
+  },
+  computed: {
+    show() {
+      return this.scrollTop > this.threshold
+    },
+  },
+  mounted() {
+    this.scrollTop = this.getScrollTop()
+    window.addEventListener(
+      'scroll',
+      debounce(() => {
+        this.scrollTop = this.getScrollTop()
+      }, 100)
+    )
+  },
+  methods: {
+    getScrollTop() {
+      return (
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0
+      )
+    },
+    scrollToTop() {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      this.scrollTop = 0
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.go-to-top {
+  cursor: pointer;
+  position: fixed;
+  bottom: 2rem;
+  right: 2.5rem;
+  width: 2rem;
+  color: var(--devui-brand);
+  z-index: 1;
+}
+.go-to-top:hover {
+  color: var(--devui-brand-hover);
+}
+@media (max-width: 959px) {
+  .go-to-top {
+    display: none;
+  }
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/docs/.vitepress/devui-theme/components/Page.vue b/docs/.vitepress/devui-theme/components/Page.vue
index 7a1d422b..c5168ff5 100644
--- a/docs/.vitepress/devui-theme/components/Page.vue
+++ b/docs/.vitepress/devui-theme/components/Page.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import PageFooter from './PageFooter.vue'
 import NextAndPrevLinks from './NextAndPrevLinks.vue'
+import BackToTop from './BackToTop.vue'
 </script>
 
 <template>
@@ -13,6 +14,7 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
       <NextAndPrevLinks />
 
       <slot name="bottom" />
+      <BackToTop />
     </div>
   </main>
 </template>
-- 
Gitee


From 07371baabb61f22151c1ec160143a4a7357109ed Mon Sep 17 00:00:00 2001
From: ElsaOOo <yjjjng0901@126.com>
Date: Mon, 11 Oct 2021 10:21:56 +0800
Subject: [PATCH 2/2] feat(backToTop): update BackToTop.vue

---
 .../devui-theme/components/BackToTop.vue      | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/.vitepress/devui-theme/components/BackToTop.vue b/docs/.vitepress/devui-theme/components/BackToTop.vue
index 185f5968..77ad149f 100644
--- a/docs/.vitepress/devui-theme/components/BackToTop.vue
+++ b/docs/.vitepress/devui-theme/components/BackToTop.vue
@@ -27,9 +27,10 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
 import { debounce } from 'lodash-es'
-export default {
+import { defineComponent, onMounted, computed, ref } from 'vue'
+export default defineComponent({
   name: 'BackToTop',
   props: {
     threshold: {
@@ -37,40 +38,39 @@ export default {
       default: 300,
     },
   },
-  data() {
-    return {
-      scrollTop: null,
+  setup(props) {
+    const scrollTop = ref<number | null>(null)
+    const show = computed(() => {
+      return scrollTop.value! > props.threshold
+    })
+    const scrollToTop = () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      scrollTop.value = 0
     }
-  },
-  computed: {
-    show() {
-      return this.scrollTop > this.threshold
-    },
-  },
-  mounted() {
-    this.scrollTop = this.getScrollTop()
-    window.addEventListener(
-      'scroll',
-      debounce(() => {
-        this.scrollTop = this.getScrollTop()
-      }, 100)
-    )
-  },
-  methods: {
-    getScrollTop() {
+    const getScrollTop = () => {
       return (
         window.pageYOffset ||
         document.documentElement.scrollTop ||
         document.body.scrollTop ||
         0
       )
-    },
-    scrollToTop() {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      this.scrollTop = 0
-    },
+    }
+    onMounted(() => {
+      scrollTop.value = getScrollTop()
+      window.addEventListener(
+        'scroll',
+        debounce(() => {
+          scrollTop.value = getScrollTop()
+        }, 100)
+      )
+    })
+
+    return {
+      show,
+      scrollToTop,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
-- 
Gitee