From 853f3d3fb88b3cffb4c744bb0f8858e8913fd3eb Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 19 Nov 2018 11:50:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0ABackTop=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E5=9C=A8=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=AE=B9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/components/a-back-top/index.js       |  2 +
 .../main/components/a-back-top/index.vue      | 90 +++++++++++++++++++
 src/components/main/main.vue                  |  5 +-
 src/libs/util.js                              | 36 ++++++++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/components/main/components/a-back-top/index.js
 create mode 100644 src/components/main/components/a-back-top/index.vue

diff --git a/src/components/main/components/a-back-top/index.js b/src/components/main/components/a-back-top/index.js
new file mode 100644
index 00000000..4da00140
--- /dev/null
+++ b/src/components/main/components/a-back-top/index.js
@@ -0,0 +1,2 @@
+import ABackTop from './index.vue'
+export default ABackTop
diff --git a/src/components/main/components/a-back-top/index.vue b/src/components/main/components/a-back-top/index.vue
new file mode 100644
index 00000000..f26f95cd
--- /dev/null
+++ b/src/components/main/components/a-back-top/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <div :class="classes" :style="styles" @click="back">
+        <slot>
+            <div :class="innerClasses">
+                <i class="ivu-icon ivu-icon-ios-arrow-up"></i>
+            </div>
+        </slot>
+    </div>
+</template>
+<script>
+import { scrollTop } from '@/libs/util'
+import { on, off } from '@/libs/tools'
+const prefixCls = 'ivu-back-top'
+
+export default {
+  name: 'ABackTop',
+  props: {
+    height: {
+      type: Number,
+      default: 400
+    },
+    bottom: {
+      type: Number,
+      default: 30
+    },
+    right: {
+      type: Number,
+      default: 30
+    },
+    duration: {
+      type: Number,
+      default: 1000
+    },
+    container: {
+      type: null,
+      default: window
+    }
+  },
+  data () {
+    return {
+      backTop: false
+    }
+  },
+  mounted () {
+    // window.addEventListener('scroll', this.handleScroll, false)
+    // window.addEventListener('resize', this.handleScroll, false)
+    on(this.containerEle, 'scroll', this.handleScroll)
+    on(this.containerEle, 'resize', this.handleScroll)
+  },
+  beforeDestroy () {
+    // window.removeEventListener('scroll', this.handleScroll, false)
+    // window.removeEventListener('resize', this.handleScroll, false)
+    off(this.containerEle, 'scroll', this.handleScroll)
+    off(this.containerEle, 'resize', this.handleScroll)
+  },
+  computed: {
+    classes () {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}-show`]: this.backTop
+        }
+      ]
+    },
+    styles () {
+      return {
+        bottom: `${this.bottom}px`,
+        right: `${this.right}px`
+      }
+    },
+    innerClasses () {
+      return `${prefixCls}-inner`
+    },
+    containerEle () {
+      return this.container === window ? window : document.querySelector(this.container)
+    }
+  },
+  methods: {
+    handleScroll () {
+      this.backTop = this.containerEle.scrollTop >= this.height
+    },
+    back () {
+      let target = typeof this.container === 'string' ? this.containerEle : (document.documentElement || document.body)
+      const sTop = target.scrollTop
+      scrollTop(this.containerEle, sTop, 0, this.duration)
+      this.$emit('on-click')
+    }
+  }
+}
+</script>
diff --git a/src/components/main/main.vue b/src/components/main/main.vue
index de023a2c..3c1603fa 100644
--- a/src/components/main/main.vue
+++ b/src/components/main/main.vue
@@ -27,6 +27,7 @@
             <keep-alive :include="cacheList">
               <router-view/>
             </keep-alive>
+            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
           </Content>
         </Layout>
       </Content>
@@ -38,6 +39,7 @@ import SideMenu from './components/side-menu'
 import HeaderBar from './components/header-bar'
 import TagsNav from './components/tags-nav'
 import User from './components/user'
+import ABackTop from './components/a-back-top'
 import Fullscreen from './components/fullscreen'
 import Language from './components/language'
 import ErrorStore from './components/error-store'
@@ -56,7 +58,8 @@ export default {
     TagsNav,
     Fullscreen,
     ErrorStore,
-    User
+    User,
+    ABackTop
   },
   data () {
     return {
diff --git a/src/libs/util.js b/src/libs/util.js
index dd4c5e05..26408ec3 100644
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -348,3 +348,39 @@ export const localSave = (key, value) => {
 export const localRead = (key) => {
   return localStorage.getItem(key) || ''
 }
+
+// scrollTop animation
+export const scrollTop = (el, from = 0, to, duration = 500, endCallback) => {
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = (
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function (callback) {
+        return window.setTimeout(callback, 1000 / 60)
+      }
+    )
+  }
+  const difference = Math.abs(from - to)
+  const step = Math.ceil(difference / duration * 50)
+
+  const scroll = (start, end, step) => {
+    if (start === end) {
+      endCallback && endCallback()
+      return
+    }
+
+    let d = (start + step > end) ? end : start + step
+    if (start > end) {
+      d = (start - step < end) ? end : start - step
+    }
+
+    if (el === window) {
+      window.scrollTo(d, d)
+    } else {
+      el.scrollTop = d
+    }
+    window.requestAnimationFrame(() => scroll(d, end, step))
+  }
+  scroll(from, to, step)
+}