bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
import Vue from 'vue'
export default Vue.directive('table-scroll', {
bind(el, binding) {
let SCROLL_DOM = null
// 获取滚动页面DOM
const timer = setInterval(() => {
SCROLL_DOM = el.querySelector(binding.value.select)
if (SCROLL_DOM) {
clearInterval(timer)
let scrollPosition = 0
SCROLL_DOM.addEventListener('scroll', (e) => {
// 当前的滚动位置 减去 上一次的滚动位置
// 如果为false则代表向上滚动,true代表向下滚动
const _this = e.target
const flagToDirection = _this.scrollTop - scrollPosition > 0
// 记录当前的滚动位置
scrollPosition = _this.scrollTop
// 记录滚动位置距离底部的位置
const scrollBottom = _this.scrollHeight - _this.scrollTop <= _this.clientHeight
// 如果已达到指定位置则触发
if (scrollBottom) {
// 将滚动行为告诉组件
setTimeout(() => {
binding.value.callback(flagToDirection)
}, 100)
}
})
}
}, 500)
}
})