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


Posted in Javascript onNovember 29, 2019

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

元素滚动

如何实现滚动

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

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

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

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 都只设置了宽高。

<div class="father" ref="father">
 <div class="child" ref="child"></div>
</div>
// 若为真说明触底
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 接收
<div v-test="title">这里是测试</div>
// 通过 binding.arg 接收
<div v-test:id1>测试2</div>

如何注册指令

全局注册

// 在单独一个文件中单独管理所有 directive 
import Vue from 'vue'
import inputClear from './input-clear'
import forNested from './picker-item-for-nested'
import copy from "./copy";

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

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

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

Vue.install的方式来安装

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

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

Vue.use 源码

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

将scroll 逻辑添加到 v-directive 中

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

function isBottom(el){
 const child = 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逻辑复用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
vue 注册组件的使用详解
May 05 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 #Javascript
Vue基础配置讲解
Nov 29 #Javascript
jQuery实现弹幕特效
Nov 29 #jQuery
Vue实现多标签选择器
Nov 28 #Javascript
swiper实现异形轮播效果
Nov 28 #Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 #Javascript
javascript实现异形滚动轮播
Nov 28 #Javascript
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python中将dataframe转换为字典的实例
2018/04/13 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
用python对oracle进行简单性能测试
2020/12/05 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
迟到检讨书400字
2014/01/13 职场文书
联谊活动总结
2014/08/28 职场文书
2014年设计师工作总结
2014/11/25 职场文书
寒假生活随笔
2015/08/15 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript