Doc: add back-to-top icon in components page (#3279)

examples/pages/template/component.tpl

@@ -2,8 +2,6 @@
   .page-component {
     padding-bottom: 95px;
     box-sizing: border-box;
-  }
-  .page-component {
     .content {
       margin-left: -1px;
       
@@ -39,6 +37,32 @@
         }
       }
     }
+    .page-component-up {
+      background-color: #58b7ff;
+      position: fixed;
+      right: 100px;
+      bottom: 150px;
+      size: 50px;
+      border-radius: 25px;
+      cursor: pointer;
+      opacity: 0.4;
+      transition: .3s;
+      i {
+        color: #fff;
+        display: block;
+        line-height: 50px;
+        text-align: center;
+        font-size: 22px;
+      }
+      &.hover {
+        opacity: 1;
+      }
+    }
+    .back-top-fade-enter,
+    .back-top-fade-leave-active {
+      transform: translateY(-30px);
+      opacity: 0;
+    }
   }
 </style>
 <template>
@@ -52,16 +76,48 @@
         <footer-nav></footer-nav>
       </el-col>
     </el-row>
+    <transition name="back-top-fade">
+      <div
+        class="page-component-up"
+        :class="{ 'hover': hover }"
+        v-show="showBackToTop"
+        @mouseenter="hover = true"
+        @mouseleave="hover = false"
+        @click="toTop">
+        <i class="el-icon-caret-top"></i>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
   import navsData from '../../nav.config.json';
+  import throttle from 'throttle-debounce/throttle';
   export default {
     data() {
       return {
         lang: this.$route.meta.lang,
-        navsData
+        navsData,
+        hover: false,
+        showBackToTop: false
       };
+    },
+    methods: {
+      toTop() {
+        this.hover = false;
+        this.showBackToTop = false;
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+      },
+      handleScroll() {
+        this.showBackToTop = (document.body.scrollTop || document.documentElement.scrollTop) >= 0.5 * document.body.clientHeight;
+      }
+    },
+    mounted() {
+      this.throttledScrollHandler = throttle(300, this.handleScroll);
+      document.addEventListener('scroll', this.throttledScrollHandler);
+    },
+    beforeDestroy() {
+      document.removeEventListener('scroll', this.throttledScrollHandler);
     }
   };
 </script>

src/utils/date.js

@@ -1,3 +1,28 @@
+/* Modified from https://github.com/taylorhakes/fecha
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 Taylor Hakes
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ *     The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ *     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ *     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
 /*eslint-disable*/
 // 把 YYYY-MM-DD 改成了 yyyy-MM-dd
 (function (main) {

src/utils/resize-event.js

@@ -1,8 +1,28 @@
-/**
-* Modified from https://github.com/sdecima/javascript-detect-element-resize
-*
-* version: 0.5.3
-**/
+/* Modified from https://github.com/sdecima/javascript-detect-element-resize
+ * version: 0.5.3
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2013 Sebastián Décima
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
 const isServer = typeof window === 'undefined';
 
 /* istanbul ignore next */