微客导航 » 文章资讯 » Vue.directive 实现元素scroll逻辑复用

Vue.directive 实现元素scroll逻辑复用

2023-08-05 06:07:03 173

继上篇Vue滚动触底mixins,将对于文档滚动触底的逻辑迁移到某个dom上，将会用到Vue.directive来实现代码逻辑复用。

元素滚动

如何实现滚动

元素实现滚动的条件有两个:

有父子两个元素
子元素的高度>父元素的高度,并且父元素设置overflow:scroll/auto;

scrollHeight计算

Element.scrollHeight这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

可以简单的理解为，滚动高度是元素可以滚动的最大值，分为两种情况

滚动高度=当前元素的clientHeight=height+padding

滚动高度=当前元素的padding+子元素的clientHeight+子元素的(padding,margin,border)+伪元素(:after,:before)
scrollTop

Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。

需要注意的是，scrollTop是针对产生滚动条的元素而言，所以分为两种情况

不符合滚动条件,scrollTop为0
符合滚动条件，可以通过Element.scrollTop来获取它的子元素的顶部到父级元素顶部的距离，不包括(border,padding)。

判断触底

为了简单起见，假设father和child都只设置了宽高。

//若为真说明触底 father.clientHeight+father.scrollTop>=child.scrollHeight

抽离成Vue-directive

基本语法

参数1

指令名称，如focus使用的时候就通过v-focus去绑定指定dom

参数2

options配置项，包含以下的钩子函数，分别在对应的生命周期触发

//注册一个全局自定义指令`v-focus`
Vue.directive('focus',{
bind(){
//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
},
//当被绑定的元素插入到DOM中时……
inserted:function(el){
//聚焦元素
el.focus()
},
update(){
//所在组件的VNode更新时调用
},
componentUpdated(){
//指令所在组件的VNode及其子VNode全部更新后调用。
},
unbind(){
//只调用一次，指令与元素解绑时调用。
}
})

钩子函数的回调参数

上面的钩子函数都接受el、binding、vnode和oldVnode这些回调参数，对常用的参数做下解释

el:指令所绑定的元素，可以用来直接操作DOM。
binding:{name,value,arg}

是绑定组件的data中的变量名

来说下value和arg的区别，假设我们想向指令传递特定的数据，可以通过下面的方式arg传递值，和value绑定值只能使用一种

//通过binding.value接收
这里是测试

//通过binding.arg接收测试2

如何注册指令

全局注册

//在单独一个文件中单独管理所有directive
importVuefrom'vue'
importinputClearfrom'./input-clear'
importforNestedfrom'./picker-item-for-nested'
importcopyfrom"./copy";

constdirectives={
copy,
'input-clear':inputClear,
'for-nested':forNested
}
Object.keys(directives).forEach(key=>{
Vue.directive(key,directives[key])
})

局部注册,通过directives选项来注册

exportdefault{
directives:{
//自定义指令的名字
autoFocus:{
inserted(el){
el.focus()
console.log('inserted');
}
}
}
}

Vue.install的方式来安装

//directive.js
exportdefault{
install(Vue){
Object.keys(directives).forEach(key=>{
Vue.directive(key,directives[key])
})
}
}

//main.js
importDirectivesfrom"./directive/index";
//Vue.use通过注册插件的方式来注册指令`Vue插件中install函数接受Vue构造函数作为第一入参`
Vue.use(Directives);

Vue.use源码

//接收一个plugin参数可以是Function也可以是Object
Vue.use=function(plugin:Function|Object){
//如果传入的是对象，需要有一个install方法，并执行该方法
if(typeofplugin.install==='function'){
plugin.install.apply(plugin,args)
//如果传入的是是函数则立即执行
}elseif(typeofplugin==='function'){
plugin.apply(null,args)
}
}

将scroll逻辑添加到v-directive中

如果子元素有多个，需要计算每个子元素的height+padding+border+margin所以为了方便使用，滚动目标的子元素有多个的情况下，用一个标签统一包裹

functionisBottom(el){
constchild=el.children[0]
if(el.clientHeight+el.scrollTop>=child.scrollHeight){
console.log('触底了');
}
}
Vue.directive('scroll',{
bind(el){
el.addEventListener('scroll',function(){
isBottom(el)
})
},
unbind(el){
el.removeEventListener(isBottom)
}
})

总结

以上所述是小编给大家介绍的Vue.directive实现元素scroll逻辑复用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue.directive 实现元素scroll逻辑复用

热门推荐

随机推荐