From d0ce16a8a1219d625ce72aa0915baa3ed122757a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
<Leopoldthecoder@users.noreply.github.com>
Date: Mon, 6 Mar 2017 18:51:37 +0800
Subject: [PATCH] Doc: add back-to-top icon in components page (#3279)
---
examples/pages/template/component.tpl | 62 +++++++++++++++++++++++++--
src/utils/date.js | 25 +++++++++++
src/utils/resize-event.js | 30 ++++++++++---
3 files changed, 109 insertions(+), 8 deletions(-)
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index 9ecc563ad..2339c78fc 100644
--- a/examples/pages/template/component.tpl
+++ b/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>
diff --git a/src/utils/date.js b/src/utils/date.js
index b7fad9226..42db03067 100644
--- a/src/utils/date.js
+++ b/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) {
diff --git a/src/utils/resize-event.js b/src/utils/resize-event.js
index 1e1d97276..092858475 100644
--- a/src/utils/resize-event.js
+++ b/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 */