和methods平级:
directives: {
loadmore: {//自定义指令: 下拉加载
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector('.selectPhaseBox .el-scrollbar__wrap');
selectWrap.addEventListener('scroll', function() {
//判断是否向下滚动
p = this.scrollTop;
if(t < p){
down = true;
}else{
down = false;
}
t = p;
//判断是否到底
const sign = 10;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
if (scrollDistance <= sign && down) {
binding.value()
}
});
}
}
}
注意点:
1.通过querySelector来监测滚动框
2.使用v-loadmore="loadmore"来执行回调函数,其中loadmore可以自定义业务逻辑,其中v-loadmore指令要放到监测的组件父级上
3.局部自定义指令放在组件文件里面,全局自定义指令放在main.js里面用Vue.directives的方式。
总结:
1.在 Vue2.0 中,代码复用和抽象的主要形式是组件。
2.3层:指令 ==》钩子函数(某个时间点,bind,inserted,unbind) ==》钩子的参数(el,binding)
参考链接:https://www.jianshu.com/p/4f0142d737a0
官方参考链接:https://cn.vuejs.org/v2/guide/custom-directive.html