头部导航组件弹出层

---

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、以下为如何封装(不考虑封装的可以忽略)

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

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

5.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值)

5.3在main.js中引入一下

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