'新增功能：返回顶部'
This commit is contained in:
dongsuo
花裤衩
parent
ba2e486099
commit
bf08756644
3 changed files with 238 additions and 1 deletions
92
src/components/BackToTop/index.vue
Normal file
92
src/components/BackToTop/index.vue
Normal file
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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: '返回顶部' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
143
src/views/components/backToTop.vue
Normal file
143
src/views/components/backToTop.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue