vue2 通过Vue.directive自定义指令实现权限判断、防抖节流

/**
 * 权限指令 
 * 例：<div v-permission="'table/del'"></div>
 */

app.directive('permission', {
   inserted: function (el, binding) {
     const { value } = binding

     // 获取VueX中的 权限按钮列表
     const buttonList = store.state.user.permission

     if (value) {
       // some 遇到 return true 时 会结束遍历
       const hasPermission = buttonList.some(btnKey => btnKey === value)
       // 没有权限直接移除 dom元素
       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     } else {
       throw new Error(`需要指定权限标识！ 如：v-permission="'table_del'"`)
     }
   }
 })

/**
* 防抖指令 单位时间只触发最后一次
* @param {Function} fn - 执行事件
* @param {?String|“click”} event - 事件类型 例：“click”
* @param {?Number|500} time - 间隔时间
* @param {Array} binding.value - [fn,event,time]
* 直接使用： 刷新
* 配置事件，间隔时间： 刷新
* 事件传递参数则： 刷新
*/

 app.directive('debounce', {
   inserted: function (el, binding) {
     try {
       let fn, event = "click", time = 500;
       if (typeof binding.value == 'function') {
         fn = binding.value
       } else {
         [fn, event, time] = binding.value
       }

       let timer;
       el.addEventListener(event, () => {
         timer && clearTimeout(timer)
         timer = setTimeout(() => fn(), time)
       })
     } catch (error) {
       console.log("防抖指令---error==>", error)
     }
   }
 })

/**
* 节流指令 一段时间内首次触发时立即执行，此时间段内再次触发，不会执行！
* @param {Function} fn - 执行事件
* @param {?String|“click”} event - 事件类型 例：“click”
* @param {?Number|500} time - 间隔时间
* @param {Array} binding.value - [fn,event,time]
* 直接使用： 刷新
* 配置事件，间隔时间： 刷新
* 事件传递参数则： 刷新
*/

    app.directive('throttle', {
      inserted: function (el, binding) {
        try {
          let fn, event = "click", time = 1500;
          if (typeof binding.value == 'function') {
            fn = binding.value
          } else {
            [fn, event, time] = binding.value
          }
          /**
           * el.preTime 记录上次触发的时间
           * 每次触发比较nowTime（当前时间） 和 el.preTime 的差是否大于指定的时间段！
           */
          el.addEventListener(event, () => {
            const nowTime = new Date().getTime()
            if (!el.preTime || nowTime - el.preTime > time) {
              console.log(!el.preTime, nowTime - el.preTime, nowTime - el.preTime > time)
              el.preTime = nowTime
              fn()
            }
          })
        } catch (error) {
          console.log("节流指令---error==>", error)
        }
      }
    })