vue 自定义指令

自定义指令也像组件那样存在钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用

• unbind：只调用一次，指令与元素解绑时调用

所有的钩子函数的参数都有以下：

• el：指令所绑定的元素，可以用来直接操作 DOM
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
• vnode：Vue 编译生成的虚拟节点
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

局部注册
 

directives: {
  focus: {
    // 指令的定义
    inserted: function (el，binding) {
    }
  }
}

全局注册

 

// 注册一个全局自定义指令 
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el,binding) {
  }
})

图片懒加载
 

• const LazyLoad = {
      // install方法
      install(Vue,options){
      	  // 代替图片的loading图
          let defaultSrc = options.default;
          Vue.directive('lazy',{
              bind(el,binding){
                  LazyLoad.init(el,binding.value,defaultSrc);
              },
              inserted(el){
                  // 兼容处理
                  if('IntersectionObserver' in window){
                      LazyLoad.observe(el);
                  }else{
                      LazyLoad.listenerScroll(el);
                  }
                  
              },
          })
      },
      // 初始化
      init(el,val,def){
          // data-src 储存真实src
          el.setAttribute('data-src',val);
          // 设置src为loading图
          el.setAttribute('src',def);
      },
      // 利用IntersectionObserver监听el
      observe(el){
          let io = new IntersectionObserver(entries => {
              let realSrc = el.dataset.src;
              if(entries[0].isIntersecting){
                  if(realSrc){
                      el.src = realSrc;
                      el.removeAttribute('data-src');
                  }
              }
          });
          io.observe(el);
      },
      // 监听scroll事件
      listenerScroll(el){
          let handler = LazyLoad.throttle(LazyLoad.load,300);
          LazyLoad.load(el);
          window.addEventListener('scroll',() => {
              handler(el);
          });
      },
      // 加载真实图片
      load(el){
          let windowHeight = document.documentElement.clientHeight
          let elTop = el.getBoundingClientRect().top;
          let elBtm = el.getBoundingClientRect().bottom;
          let realSrc = el.dataset.src;
          if(elTop - windowHeight<0&&elBtm > 0){
              if(realSrc){
                  el.src = realSrc;
                  el.removeAttribute('data-src');
              }
          }
      },
      // 节流
      throttle(fn,delay){
          let timer; 
          let prevTime;
          return function(...args){
              let currTime = Date.now();
              let context = this;
              if(!prevTime) prevTime = currTime;
              clearTimeout(timer);
              
              if(currTime - prevTime > delay){
                  prevTime = currTime;
                  fn.apply(context,args);
                  clearTimeout(timer);
                  return;
              }
  
              timer = setTimeout(function(){
                  prevTime = Date.now();
                  timer = null;
                  fn.apply(context,args);
              },delay);
          }
      }
  
  }
  export default LazyLoad;

  按钮/页面权限
  
   

  mport store from '@/store'
  
  function checkPermission(el, binding) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions
  
    //单个权限
  
    if (value){
      const hasPermission = permissions.includes(value)
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else {
      throw new Error(`need permission! Like v-permission="1"`)
    }
  
    //多个权限
  
    /*if (value && value instanceof Array) {
      if (value.length > 0) {
        const permissionRoles = value
  
        const hasPermission = roles.some(role => {
          return permissionRoles.includes(role)
        })
  
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    } else {
      throw new Error(`need roles! Like v-permission="['xxx','xxx']"`)
    }*/
  }
  
  export default {
    inserted(el, binding) {
      checkPermission(el, binding)
    },
    update(el, binding) {
      checkPermission(el, binding)
    }
  }