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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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具体实现代码
2010/10/12 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php实现复制移动文件的方法
2015/07/29 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
jquery获取节点名称
2015/04/26 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Python中的类学习笔记
2014/09/23 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python代码如何注释
2020/06/01 Python
Python内置函数property()如何使用
2020/09/01 Python
Python os库常用操作代码汇总
2020/11/03 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL