项目需求：要求当前项目每个页面滑到超出一屏的距离时，出现 backTop 按钮，点击则回到最顶端；俗称置顶操作：
因为涉及到的页面较多，每个页面都加肯定显得重复累赘，最终想到了 Vue 的自定义指令 Vue.directive；
场景分析：①.监听页面滚动过程，计算当前的 scrollY 与 设定的 number 值进行对比，从而决定 backTop 按钮的出现隐藏；
②.出现 backTop 按钮时，点击按钮，实现置顶效果（为实现更完美的置顶效果，加了定时器，保证了一定速度的滑行）；
实现过程：为保证作用于全局，我们在 main.js，App.vue 中进行代码的编写：
main.js
// 自定义指令实现back-top;
Vue.directive('scroll-show',{
inserted(el,binding){
let scope = binding.arg || '200';
window.addEventListener('scroll',function(e){
if(this.scrollY > Number(scope)){
binding.value.value = true;
}else{
binding.value.value = false;
}
})
}
})
Vue.directive('back-top',{
inserted(el,binding){
let e = binding.arg || 'click';
el.addEventListener(e,function(){
let scrollToptimer = setInterval(function(){
let top = document.documentElement.scrollTop + document.body.scrollTop;
let speed = top/4;
top -= speed;
document.documentElement.scrollTop = document.body.scrollTop = top;
if(top == 0){
clearInterval(scrollToptimer);
}
},30)
})
}
})
backTop.vue
<template>
<div class="back-top" v-show='isShow.value'>
<span></span>
</div>
</template>
<script>
export default {
props: ['isShow']
}
</script>
<style scoped>
.back-top{
display: flex;
align-items:center;
}
.back-top > span:nth-child(1) {
display: inline-block;
width: 4rem;
height: 4rem;
background-image: url(./images/backTop.png);
background-repeat: no-repeat;
background-size: contain;
}
.back-top > span:nth-child(2) {
color: #333;
padding-left:0.5rem;
}
.back-top {
position: fixed;
right: 1.5rem;
bottom: 12rem;
}
</style>
App.vue
按照上述代码编写便可以实现全局页面置顶操作；便于后期维护，修改；