vue项目自定义滚动指令控制按钮显示隐藏

在vue项目中，有些页面需要toTop的按钮（滚到顶部），因此在页面中需要用到滚动事件，但是如果很多页面都需要用到这个按钮，就要在这些页面中都加上滚动事件，会导致页面代码臃肿，不便维护。
这里使用vue自定义指令封装一个全局的滚动事件，在需要的页面引用组件，加上指令即可。
下面上代码：
1、首先封装一个toTop的按钮组件（默认显示）

props接收的doc值就是需要用到toTop组件的父级类名或者id（最外层）
2、引用组件

import toTop from '@/components/bar/toTop'
components: {
   toTop
},

将组件放在页面最后面（方便后面获取节点操作），将父节点类名传给组件，进行事件操作

组件封装使用完成

3、封装自定义滚动指令（全局）
main.js

import Vue from 'vue'

Vue.directive('docScroll', {
    inserted: (el, bind, vnode) => {
        vnode.children[vnode.children.length-1].elm.hidden = true
        el.addEventListener('scroll', function () {
            if (el.scrollTop >= 360) {
                vnode.children[vnode.children.length-1].elm.hidden = false
            }else {
                vnode.children[vnode.children.length-1].elm.hidden = true
            }
        })
    }
})

查看vue自定义指令官方文档
el：当前元素。vnode：当前节点，可获取子节点（toTop组件）。
自行控制台输出看结果

我将toTop组件放在页面的最后，所以这里获取的最后一个子节点

vnode.children[vnode.children.length-1].elm.hidden = true

执行指令时让组件隐藏，在滚动事件里判断滚动距离控制组件显示隐藏

el.addEventListener('scroll', function () {
    if (el.scrollTop >= 360) {
        vnode.children[vnode.children.length-1].elm.hidden = false
    }else {
        vnode.children[vnode.children.length-1].elm.hidden = true
    }
})

最后最后，就是使用指令啦
在你需要用到的页面中引用组件，使用指令

完成。
如有疑惑请留言…