Utils

1. directive

• directives/index.js，在 main.js 中导入。

  import Vue from 'vue'
  import * as directives from './directives'
  
  // 遍历后在全局定义指令
  Object.keys(directives).forEach(item => Vue.directive(item, directives[item]))
  

• directives/directives.js，指令集合。

  /**
   * @description: 输入框自动聚焦
   */
  export const focus = {
    inserted: (el, binding) => el.focus(),
  }
  
  /**
   * @description: 防抖指令
   * @param {Array[function, String?, Number?]} 执行函数、监听事件、间隔时间
   */
  export const debounce = {
    inserted(el, binding) {
      const [fn, event = 'click', time = 500] = binding.value
      let timer
      el.addEventListener(event, () => {
        timer && clearTimeout(timer)
        timer = setTimeout(fn, time)
      })
    },
  }
  
  /**
   * @description: 节流指令
   * @param {Array[function, String?, Number?]} 执行函数、监听事件、间隔时间
   */
  export const throttle = {
    inserted(el, binding) {
      const [fn, event = 'click', time = 1000] = binding.value
      let preTime = +new Date()
      el.addEventListener(event, () => {
        const nowTime = +new Date()
        if (nowTime - preTime > time) {
          fn()
          preTime = nowTime
        }
      })
    },
  }
  
  /**
   * @description: 图片懒加载(性能较差)
   * @param {String} binding.value 图片地址
   */
  export const lazy = {
    inserted(el, binding) {
      function fun() {
        const H = window.innerHeight
        const st = document.body.scrollTop || document.documentElement.scrollTop
        // 预加载高度200px
        if (el.offsetTop <= H + st + 200) {
          el.src = binding.value // 图片懒加载
          // el.style.backgroundImage = `url(${binding.value})` // 背景图片懒加载
          window.removeEventListener('scroll', fun) // 停止监听
        }
      }
      fun()
      window.addEventListener('scroll', fun) // 开启监听
    },
  }
  
  /**
   * @description: 图片懒加载(不兼容IE,性能好)
   * @param {String} binding.value 图片地址
   */
  export const lazy = {
    inserted(el, binding) {
      const io = new IntersectionObserver(
        entries => {
          const en = entries[0]
          if (en.isIntersecting) {
            en.target.src = binding.value // 图片懒加载
            // en.target.style.backgroundImage = `url(${binding.value})` // 背景图片懒加载
            io.unobserve(en.target) // 停止监听
          }
        },
        { rootMargin: '200px 0px' } // 预加载高度200px
      )
      io.observe(el) // 开启监听
    },
  }