From 2eae339af22d99376a2be3d84886f44815dadec3 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 6 Mar 2020 18:04:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4markdown=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/backtop/AlBackTop.vue | 142 +++++++++++++++++++++++++++
 src/layout/index.vue                 |   7 +-
 src/views/public/p/index.vue         |  99 +++++++++++++------
 3 files changed, 214 insertions(+), 34 deletions(-)
 create mode 100644 src/components/backtop/AlBackTop.vue

diff --git a/src/components/backtop/AlBackTop.vue b/src/components/backtop/AlBackTop.vue
new file mode 100644
index 0000000..5ed7953
--- /dev/null
+++ b/src/components/backtop/AlBackTop.vue
@@ -0,0 +1,142 @@
+<template>
+  <transition name="el-fade-in">
+    <div
+      v-if="visible"
+      @click.stop="handleClick"
+      :style="{
+        'right': styleRight,
+        'bottom': styleBottom
+      }"
+      class="el-backtop">
+      <slot>
+        <el-icon name="caret-top"></el-icon>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import Cookies from 'js-cookie'
+  import throttle from 'throttle-debounce/throttle';
+
+  const cubic = value => Math.pow(value, 3);
+  const easeInOutCubic = value => value < 0.5
+    ? cubic(value * 2) / 2
+    : 1 - cubic((1 - value) * 2) / 2;
+
+  export default {
+    name: 'AlBackTop',
+
+    props: {
+      visibilityHeight: {
+        type: Number,
+        default: 200
+      },
+      target: [String],
+      right: {
+        type: Number,
+        default: 40
+      },
+      bottom: {
+        type: Number,
+        default: 40
+      }
+    },
+
+    data() {
+      return {
+        el: null,
+        container: null,
+        visible: false
+      };
+    },
+
+    computed: {
+      styleBottom() {
+        return `${this.bottom}px`;
+      },
+      styleRight() {
+        return `${this.right}px`;
+      }
+    },
+
+    mounted() {
+      this.init();
+      this.throttledScrollHandler = throttle(300, this.onScroll);
+      this.container.addEventListener('scroll', this.throttledScrollHandler);
+
+      window.onbeforeunload = function () {
+        var scrollPos;
+        if (typeof window.pageYOffset != 'undefined') {
+          scrollPos = window.pageYOffset;
+        }
+        else if (typeof document.compatMode != 'undefined' && document.compatMode !== 'BackCompat') {
+          scrollPos = document.documentElement.scrollTop;
+        }
+        else if (typeof document.body != 'undefined') {
+          scrollPos = document.body.scrollTop;
+        }
+        document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
+      }
+
+    },
+
+    methods: {
+      init() {
+        this.container = document;
+        this.el = document.documentElement;
+        if (this.target) {
+          this.el = document.querySelector(this.target);
+          if (!this.el) {
+            throw new Error(`target is not existed: ${this.target}`);
+          }
+          this.container = this.el;
+        }
+      },
+      getScroll(el){
+        return window.pageYOffset || el.scrollTop || document.body.scrollTop || 0
+      },
+      onScroll() {
+        const scrollTop = this.getScroll(this.el);
+        console.log(scrollTop)
+        this.visible = scrollTop >= this.visibilityHeight;
+      },
+      handleClick(e) {
+        this.scrollToTop();
+        this.$emit('click', e);
+      },
+      scrollToTop() {
+        const el = this.el;
+        const beginTime = Date.now();
+        const beginValue = this.getScroll(el);
+        const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
+        const frameFunc = () => {
+          const progress = (Date.now() - beginTime) / 500;
+          if (progress < 1) {
+            if(el.scrollTop !== 0){
+              el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+            }else if(window.pageYOffset !== 0){
+              window.pageYOffset = beginValue * (1 - easeInOutCubic(progress));
+            }else{
+              document.body.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+            }
+            rAF(frameFunc);
+          } else {
+            if(el.scrollTop !== 0){
+              el.scrollTop = 0;
+            }else if(window.pageYOffset !== 0){
+              window.pageYOffset = 0;
+            }else{
+              document.body.scrollTop = 0;
+            }
+          }
+        };
+        rAF(frameFunc);
+      }
+    },
+
+    beforeDestroy() {
+      this.container.removeEventListener('scroll', this.throttledScrollHandler);
+    }
+  };
+</script>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 315f247..0221de3 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -50,20 +50,15 @@ export default {
   },
   mounted() {
     if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
-      this.isShow = false
       window.pc = false
     } else {
-      this.isShow = true
       window.pc = true
     }
 
-    console.log(getToken())
     if(getToken()){
-      this.isShow = true
-      window.pc = true
+      this.isShow = window.pc;
     }else{
       this.isShow = false
-      window.pc = false
     }
   },
   methods: {
diff --git a/src/views/public/p/index.vue b/src/views/public/p/index.vue
index 43f3509..e164fca 100644
--- a/src/views/public/p/index.vue
+++ b/src/views/public/p/index.vue
@@ -1,41 +1,50 @@
 <template>
   <div>
-    <mavon-editor
-      v-if="!showList"
-      v-model="content"
-      :subfield="false"
-      :boxShadow="false"
-      defaultOpen="preview"
-      :navigation="toolbarsFlag"
-      :toolbarsFlag="toolbarsFlag"
-      :toolbars="toolbars"
-      @navigationToggle="navigationToggle"
-    />
+    <al-back-top></al-back-top>
+    <div class="content">
 
-    Scroll down to see the bottom-right button.
-    <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
-      <div
-        style="{
-        height: 100%;
-        width: 100%;
-        background-color: #f2f5f6;
-        box-shadow: 0 0 6px rgba(0,0,0, .12);
-        text-align: center;
-        line-height: 40px;
-        color: #1989fa;
-      }"
-      >
-        UP
-      </div>
-    </el-backtop>
+      <el-row :gutter="0">
+        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"><div>{{leftContent}}d</div></el-col>
+        <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
+          <mavon-editor
+            v-if="!showList"
+            v-model="content"
+            :subfield="false"
+            :boxShadow="false"
+            defaultOpen="preview"
+            :navigation="toolbarsFlag"
+            :toolbarsFlag="toolbarsFlag"
+            :toolbars="toolbars"
+            @navigationToggle="navigationToggle"
+          />
+        </el-col>
+        <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"></el-col>
+      </el-row>
+      <!--{{content}}-->
+      <!--<mavon-editor-->
+        <!--v-if="!showList"-->
+        <!--v-model="content"-->
+        <!--:subfield="false"-->
+        <!--:boxShadow="false"-->
+        <!--defaultOpen="preview"-->
+        <!--:navigation="toolbarsFlag"-->
+        <!--:toolbarsFlag="toolbarsFlag"-->
+        <!--:toolbars="toolbars"-->
+        <!--@navigationToggle="navigationToggle"-->
+      <!--/>-->
+    </div>
   </div>
 </template>
 
 <script>
+  import AlBackTop from "@/components/backtop/AlBackTop";
   import markdownApi from '@/api/markdown-api'
   export default {
+    components: { AlBackTop },
     data() {
       return {
+        leftContent: '',
+        backTopTarget: ".content",
         showList: true,
         toolbars:{
           navigation: true,
@@ -52,12 +61,31 @@
       this.getMarkDown()
     },
     methods: {
+      onScroll() {
+        // console.log(document.documentElement.scrollTop)
+      },
       getMarkDown() {
         markdownApi.getMarkdown({
           mark: this.$route.query.mark
         }).then((res) => {
           this.content = res.data.contentText
-          console.log(res.data)
+          const _this = this
+          setTimeout(function () {
+            _this.backTopTarget = ".v-note-wrapper .markdown-body"
+
+            if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
+              var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
+              console.log('arr',arr)
+              document.documentElement.scrollTop = parseInt(arr[1]);
+              document.body.scrollTop = parseInt(arr[1]);
+            }
+          },10)
+
+          const doc = document;
+          // const doc = document.querySelector(".v-show-content");
+          console.log(doc)
+          doc.addEventListener("scroll", _this.onScroll);
+
         })
       },
       navigationToggle(d){
@@ -66,3 +94,18 @@
     }
   }
 </script>
+<style lang="scss" scoped>
+  /deep/ .v-note-wrapper {
+    position: unset;
+  }
+  .content {
+    /*font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",*/
+    /*"Microsoft YaHei", "微软雅黑", Arial, sans-serif;*/
+    /*-webkit-font-smoothing: antialiased;*/
+    /*-moz-osx-font-smoothing: grayscale;*/
+    /*width: 100%;*/
+    /*height: 100%;*/
+    /*overflow-y: scroll;*/
+  }
+
+</style>