| Vue 自定义指令

介绍

官网：https://cn.vuejs.org/v2/guide/custom-directive.html

学习

全局指令定义：

image.png

知识点

• 5 个钩子函数，4 个钩子函数参数
• 动态指令参数
• 简写
• 字面量

练习

• 目标
  自定义一个 scroll 指令，监听滚动条距离窗口底部的距离

• 知识点
  1）事件 Events，参见：https://developer.mozilla.org/zh-CN/docs/Web/Events
  2）计算滚动相关 api，参见：https://www.jianshu.com/writer#/notebooks/39520468/notes/55772971

• 实验环境
  vue-cli 脚手架，使用 webpack-simple 模板，修改 App.vue 如下：

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
    <h2 v-scroll>onScroll</h2>
  </div>
</template>

<script>
import Vue from 'vue';

let list = [];
let i = 100;
while(i > 0){
  list.push(i);
  i--;
}

Vue.directive('scroll', {
  // 钩子函数
  inserted(el, binding, vnode){
    // 虚拟节点
    console.log(vnode);
    window.addEventListener('scroll', vnode.context.onScroll);
  }
});

export default {
  name: 'app',
  data () {
    return {
      list: list,
      num: 1000
    }
  },
  methods:{
    onScroll(){
      let scrollTop = document.documentElement.scrollTop || window.scrollY || window.pageYOffset ;
      let innerHeight = window.innerHeight;
      let scrollHeight = document.documentElement.scrollHeight;

      console.log(scrollTop, innerHeight, scrollHeight, scrollHeight - scrollTop - innerHeight);
      // 倒数1000距离范围内，每200距离打印一次距底距离
      if(scrollHeight - scrollTop - innerHeight == this.num){
        console.log(`见底距离：${scrollHeight - scrollTop - innerHeight}`);
        this.num -= 200;
        if(this.num == -200){
          this.num += 1200;
        }
      }
    }
  }
}
</script>

<style>
</style>

• 效果

演示.gif