归来顶部的平常

前天在用vue项目中,完结回到顶部功用的时候,小编写了三个backTop组件,接下去须要经过监听window.scroll事件来控制那么些组件展现隐藏

今日在用vue项目中,达成回到顶部成效的时候,小编写了2个backTop组件,接下去需求经过监听window.scroll事件来支配这几个组件呈现隐藏

因为大概会有此外的组件会用到如此的逻辑,所以将此意义做成3个自定义指令:

因为大概会有别的的组件会用到那般的逻辑,所以将此意义做成3个自定义指令:

基于滚动的离开控制2个数目为true照旧为false(v-scroll-show)

依据滚动的离开控制2个多少为true照旧为false(v-scroll-show)

问题:

问题:

唯一要求小心的是,在命令的钩子函数中大家得以访问到el,也便是选取指令的价签,可是我们无法平昔改动value(指令的值所代表的多寡)

唯一要求小心的是,在命令的钩函数中大家得以访问到el,也正是选用指令的标签,可是大家不可能直接改动value(指令的值所代表的多寡)

据此我们运用引用类型来展开地址的传递来缓解这些难题

就此大家应用引用类型来开始展览地址的传递来缓解这几个题材

接下去有写了一个v-back-top指令,便是将回来顶部作用做成三个发令,哪个组件或许dom要求选用到回到顶部,就增加这几个命令就足以,设置区别的参数来决定在分化的意况下接触

接下去有写了一个v-back-top指令,正是将回来顶部作用做成四个命令,哪个组件或许dom要求接纳到回到顶部,就增进那一个命令就能够,设置分化的参数来支配在差别的情形下接触

<BackTop v-back-top v-scroll-show:300='isBackShow' :isShow='isBackShow'></BackTop>

data(){
    return {
        isBackShow:{value:false}
    }
 },


js:

import Vue from 'vue'

Vue.directive('scroll-show',{
    inserted(el,binding){
        let scope = binding.arg || '200'
        window.addEventListener("scroll",function(e){
            if(this.scrollY>Number(binding.arg)){
                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(){
            document.documentElement.scrollTop = document.body.scrollTop =0;
        })
    }
})
<BackTop v-back-top v-scroll-show:300='isBackShow' :isShow='isBackShow'></BackTop>

data(){
    return {
        isBackShow:{value:false}
    }
 },


js:

import Vue from 'vue'

Vue.directive('scroll-show',{
    inserted(el,binding){
        let scope = binding.arg || '200'
        window.addEventListener("scroll",function(e){
            if(this.scrollY>Number(binding.arg)){
                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(){
            document.documentElement.scrollTop = document.body.scrollTop =0;
        })
    }
})