增加回到顶部

scripts/mdToVue.js

@@ -83,7 +83,7 @@ function createdFile(output, sorce, ishasCode) {
     var bufs = `<template><div  @click="dsCode">
         <div v-if="content" class="layer">
           <pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
-        </div>`+ res + `</div></template><script>import root from '../root.js';
+        </div>`+ res + `<nut-backtop></nut-backtop></div></template><script>import root from '../root.js';
         export default {
             mixins:[root]
         }</script>`;

sites/doc/app.js

@@ -4,8 +4,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router';
 import copy from 'clipboard';
-
-
+import backtop from './compents/backtop/backtop.js';
+import  './compents/backtop/backtop.css';
+backtop.install(Vue);
+console.log(backtop)
+debugger
 import 'highlight.js/styles/github.css';
 
 

sites/doc/compents/backtop/backtop.css

@@ -0,0 +1,29 @@
+/*! NutUI2(2.0.2) - backtop.css, 4d177b46df0af221d246, 2019-01-25T10:47:27+08:00 */
+.nut-backtop {
+  display: none;
+  line-height: 0;
+  position: fixed;
+  cursor: pointer;
+  bottom: 20px;
+  right: 10px;
+  z-index: 1111; }
+  .nut-backtop.show {
+    display: block; }
+  .nut-backtop-main {
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
+    width: 38px;
+    height: 38px;
+    background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+    background-size: 20px 20px;
+    border-radius: 50%;
+    border: 2px solid rgba(180, 180, 180, 0.5);
+    box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, 0.1); }
+  .nut-backtop i {
+    color: #fff;
+    font-size: 24px;
+    padding: 8px 12px;
+    line-height: 0; }
+
+
+/*# sourceMappingURL=backtop.css.map*/

sites/doc/compents/backtop/backtop.scss

@@ -0,0 +1,28 @@
+.nut-backtop {
+    display: none;
+    line-height: 0;
+    position: fixed;
+    cursor: pointer;
+    bottom: 20px;
+    right: 10px;
+    z-index: 1111;
+    &.show {
+        display: block;
+    }
+    &-main {
+        transition: all .2s ease-in-out;
+        width: 38px;
+        height: 38px;
+        background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+        background-size: 20px 20px;
+        border-radius: 50%;
+        border: 2px solid rgba(180,180,180,.5);
+        box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, .1)
+    }
+    i {
+        color: #fff;
+        font-size: 24px;
+        padding: 8px 12px;
+        line-height: 0;
+    }
+}

sites/doc/compents/backtop/backtop.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :class="['nut-backtop', {'show': backTop}]" :style="styles" @click="goto">
+    <slot>
+      <div class="nut-backtop-main"></div>
+    </slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "nut-backtop",
+  props: {
+    distance: {
+      type: Number,
+      default: 200
+    },
+    bottom: {
+      type: Number,
+      default: 20
+    },
+    right: {
+      type: Number,
+      default: 10
+    },
+    duration: {
+      type: Number,
+      default: 1000
+    },
+    zIndex: {
+      type: Number,
+      default: 1111
+    }
+  },
+  data() {
+    return {
+      backTop: false
+    };
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll, false);
+    window.addEventListener("resize", this.handleScroll, false);
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll, false);
+    window.removeEventListener("resize", this.handleScroll, false);
+  },
+  computed: {
+    styles() {
+      return {
+        bottom: `${this.bottom}px`,
+        right: `${this.right}px`,
+        "z-index": this.zIndex
+      };
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.backTop = window.pageYOffset >= this.distance;
+    },
+    goto() {
+      const sTop =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      this.scrollTop(window, sTop, 0, this.duration);
+      this.$emit("click");
+    },
+    scrollTop(el, from = 0, to, duration = 500, endCallback) {
+      this.el = el;
+      let lastTime = 0;
+      let vendors = ["webkit", "moz"];
+      for (
+        let x = 0;
+        x < vendors.length && !window.requestAnimationFrame;
+        ++x
+      ) {
+        window.requestAnimationFrame =
+          window[vendors[x] + "RequestAnimationFrame"];
+        window.cancelAnimationFrame =
+          window[vendors[x] + "CancelAnimationFrame"] ||
+          window[vendors[x] + "CancelRequestAnimationFrame"];
+      }
+
+      if (!window.requestAnimationFrame) {
+        window.requestAnimationFrame = function(callback, element) {
+          let currTime = new Date().getTime();
+          let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
+          let id = window.setTimeout(function() {
+            callback(currTime + timeToCall);
+          }, timeToCall);
+          lastTime = currTime + timeToCall;
+          return id;
+        };
+      }
+      if (!window.cancelAnimationFrame) {
+        window.cancelAnimationFrame = function(id) {
+          clearTimeout(id);
+        };
+      }
+      const difference = Math.abs(from - to);
+      const step = Math.ceil((difference / duration) * 50);
+
+      this.scroll(from, to, step, endCallback);
+    },
+    scroll(start, end, step, endCallback) {
+      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 (this.el === window) {
+        window.scrollTo(d, d);
+      } else {
+        this.el.scrollTop = d;
+      }
+      window.requestAnimationFrame(() => this.scroll(d, end, step));
+    }
+  }
+};
+</script>

sites/doc/compents/backtop/index.js

@@ -0,0 +1,8 @@
+import BackTop from './backtop.vue';
+import './backtop.scss';
+
+BackTop.install = function(Vue) {
+  Vue.component(BackTop.name, BackTop);
+};
+
+export default BackTop

sites/doc/root.js

@@ -1,3 +1,5 @@
+
+
 var myMixin ={
     data(){
         return {