自定义封装一个吸顶显示隐藏的小指令

效果视频

1.定义一个自定义指令title

  <header v-title>
      <i class="iconfont icon-back"></i>
      <span>11111</span>
    </header>

2.在该页面引入vue

import Vue from "vue";

3.创建title指令,并测试一下

Vue.directive("title", {
  inserted(el) {
    console.log(el)
  },
});

得到整个节点

4.设置显示/隐藏

Vue.directive("title", {
  inserted(el) {
    // console.log(el)
    el.style.display = "none";
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > 40) {
        el.style.display = "block";
      } else {
        el.style.display = "none";
      }
    };
  },
  unbind() {
    window.onscroll = null;
  }
});

因为在此页面定义的scroiiTop一旦使用的话会在别的页面被继承使用,所以要在unbind钩子函数中设置为null

5.以下为如何封装(不考虑封装的可以忽略)

1.定义一个title并传入想要的距离的值

<header v-title='100'>
  <i class="iconfont icon-back"></i>
  <span>11111</span>
</header>

2.在until下创建scrollTop.js,写入

import Vue from "vue";
Vue.directive("title", {
  inserted(el,bind) {
    // console.log(el)
    console.log(bind.value)
    el.style.display = "none";
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > bind.value) {
        el.style.display = "block";
      } else {
        el.style.display = "none";
      }
    };
  },
  unbind() {
    window.onscroll = null;
  }
});

title中还有一个bind属性,可以获取传入的值(上步骤的100值)

3.在main.js中引入一下

import '@/until/scrollTop'  //引入吸顶

47–1h2m

完