From 2ff512fd4bfe48b931a8acefd1e76b2b3c45b527 Mon Sep 17 00:00:00 2001
From: dongsuo <xuxiaofei1.0@outlook.com>
Date: Mon, 17 Jul 2017 15:33:21 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=EF=BC=9A?=
=?UTF-8?q?=E8=BF=94=E5=9B=9E=E9=A1=B6=E9=83=A8'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/BackToTop/index.vue | 92 +++++++++++++++++++
src/router/index.js | 4 +-
src/views/components/backToTop.vue | 143 +++++++++++++++++++++++++++++
3 files changed, 238 insertions(+), 1 deletion(-)
create mode 100644 src/components/BackToTop/index.vue
create mode 100644 src/views/components/backToTop.vue
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
new file mode 100644
index 00000000..10aaef1b
--- /dev/null
+++ b/src/components/BackToTop/index.vue
@@ -0,0 +1,92 @@
+<template>
+ <transition name="fade">
+ <div class="back-to-top" @click="backToTop" v-show="visible">
+ <el-tooltip class="item" effect="dark" content="返回顶部" placement="top">
+ <i class="el-icon-arrow-up"></i>
+ </el-tooltip>
+ </div>
+ </transition>
+</template>
+<script>
+export default {
+ name: 'BackToTop',
+ props: {
+ visibilityHeight: {
+ type: Number,
+ default: 400
+ },
+ backPosition: {
+ type: Number,
+ default: 0
+ }
+ },
+ data() {
+ return {
+ visible: false
+ }
+ },
+ mounted() {
+ window.addEventListener('scroll', this.handleScroll)
+ },
+ beforeDestroy() {
+ window.removeEventListener('scroll', this.handleScroll)
+ },
+ methods: {
+ handleScroll() {
+ this.visible = window.pageYOffset > this.visibilityHeight;
+ },
+ backToTop() {
+ const start = window.pageYOffset;
+ let i = 0;
+ const t = setInterval(() => {
+ const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
+ if (next <= this.backPosition) {
+ window.scrollTo(0, this.backPosition);
+ clearInterval(t)
+ } else {
+ window.scrollTo(0, next);
+ }
+ i++;
+ }, 16.7)
+ },
+ easeInOutQuad(t, b, c, d) {
+ if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+ return -c / 2 * (--t * (t - 2) - 1) + b;
+ }
+ }
+}
+</script>
+<style scoped>
+.back-to-top {
+ position: fixed;
+ right: 50px;
+ bottom: 50px;
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ box-shadow: 1px 1px 1px #58B7FF;
+ text-align: center;
+ cursor: pointer;
+ background: #58B7FF;
+ color: #fff;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 1s
+}
+
+.fade-enter,
+.fade-leave-to {
+ opacity: 0
+}
+
+.back-to-top i {
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ line-height: 40px;
+}
+</style>
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 7f20b766..0d476f2f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,6 +28,7 @@ const Sticky = _import('components/sticky');
const SplitPane = _import('components/splitpane');
const CountTo = _import('components/countTo');
const Mixin = _import('components/mixin');
+const BackToTop = _import('components/backToTop')
/* charts */
const chartIndex = _import('charts/index');
@@ -129,7 +130,8 @@ export const asyncRouterMap = [
{ path: 'dropzone', component: Dropzone, name: 'Dropzone' },
{ path: 'sticky', component: Sticky, name: 'Sticky' },
{ path: 'countto', component: CountTo, name: 'CountTo' },
- { path: 'mixin', component: Mixin, name: '小组件' }
+ { path: 'mixin', component: Mixin, name: '小组件' },
+ { path: 'backtotop', component: BackToTop, name: '返回顶部' }
]
},
{
diff --git a/src/views/components/backToTop.vue b/src/views/components/backToTop.vue
new file mode 100644
index 00000000..b20bbcfe
--- /dev/null
+++ b/src/views/components/backToTop.vue
@@ -0,0 +1,143 @@
+<template>
+ <div class="components-container">
+ <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <div>我是占位</div>
+ <back-to-top id="back-to-top-t" :visibilityHeight="300" :backPosition="50"></back-to-top>
+ </div>
+</template>
+<script>
+import BackToTop from 'components/BackToTop';
+export default {
+ components: { BackToTop }
+
+}
+</script>
+<style scoped>
+ #back-to-top-t{
+ right: 100px;
+ bottom: 100px;
+ }
+</style>