vue全局注冊自定義指令防抖怎么實現

本文小編為大家詳細介紹“vue全局注冊自定義指令防抖怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue全局注冊自定義指令防抖怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

全局注冊自定義指令防抖

1、先建一個js文件

建一個debounce.js文件，放在src/directives文件夾里面

export default (vue) => {
  /**
   * 綁定方法
   * @param {Object} el - The element the directive is bound to.
   * @param {Object} binding - An vue directive object
   */
   vue.directive('debounce', { //防抖函數指令
      inserted: function(el, binding) {
        let timer;
        el.addEventListener("click", () => {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
          //關鍵點:vue 的自定義指令傳遞的參數binding 如果是一個函數,則通過      binding.value()來執行,通過上述示例,還可以傳遞比如事件, 綁定對象之類的
            binding.value();
          }, 1000);
        });
      }
   })
}

2、在mian.js里面注冊

import Debounce from './directives/debounce.js' //防抖自定義指令
Debounce(Vue)

3、使用

在組件中button按鈕添加該指令即可實現防抖

v-debounce="getTableData"

vue防抖的使用

防抖函數

function debounce(fn, immediate = true) {
  let timer;
  return function () {
    if (timer) clearTimeout(timer);
    if (immediate) {
      let bool = !timer;
      timer = setTimeout(() => (timer = 0), 300);
      return bool && fn.apply(this, [...arguments]);
    }
    timer = setTimeout(() => fn.apply(this, [...arguments]), 300);
  };
}
export default {
  debounce,
};

在vue中直接使用

import utils from "./utils/index";
methods:{
    // 手動添加debounce
    btnHandler1: utils["debounce"](function (...rest) {
      console.log("2222 ", this, rest);
    }),
}

vue中使用高階組件

使用抽象組件對于傳入按鈕進行改造，對于按鈕進行事件的重寫，加入防抖功能；

import Vue from 'vue'
// ctx 【context 上下文 綁定this指向】
const debounce = (func, time, ctx, immediate = true) => {
  let timeout
  return function (...params) {
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      var callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, time)
      if (callNow) func.apply(ctx, params)
    } else {
      timeout = setTimeout(function () {
        func.apply(ctx, params)
      }, time)
    }
  }
}
// 只能綁定一個組件，多個組件無法綁定
Vue.component('Debounce', {
  abstract: true,//抽象組件，無狀態，
  props: ['time', 'events', 'immediate'],
  created () {
    this.eventKeys = this.events && this.events.split(',')
    this.originMap = {}
    this.debouncedMap = {}
  },
  render () {
    // 組件使用proxy對象包裝，可以了解 【this】；
    // 取出虛擬節點，默認第一個，也就是高階組件中若傳遞了多個子組件，只展示第一個
    const vnode = this.$slots.default[0]
    // 如果默認沒有傳 events，則對所有綁定事件加上防抖
    if (!this.eventKeys) {
      this.eventKeys = Object.keys(vnode.data.on)
    }
    this.eventKeys.forEach((key) => {
      const target = vnode.data.on[key]
      if (target === this.originMap[key] && this.debouncedMap[key]) {
        vnode.data.on[key] = this.debouncedMap[key]
      } else if (target) {
        this.originMap[key] = target
        this.debouncedMap[key] = debounce(target, this.time, vnode, this.immediate)
        vnode.data.on[key] = this.debouncedMap[key]
      }
    })
    return vnode
  }
})

    <Debounce events="click" time="300">
      <button @click="clickHandler(1,2,3)" :btnval="'val'">click1</button>
    </Debounce>

vue中自定義指令使用

// 指令【防抖】
Vue.directive("debounce", {
  // 只調用一次，第一次綁定元素時調用
  // el【綁定的元素】，binding【一個相關對象】，vnode【vue編譯生成的虛擬節點】
  // beforemount之后，mounted之前；
  // init events&lifecycle 【初始化事件和生命周期】
  bind(el, binding, vnode, oldVnode) {
    console.log(el, binding, vnode, oldVnode);
    let { value } = binding;
    let [target, time] = value;
    const debounced = debounce(target, time, vnode);
    el.addEventListener("click", debounced);
  },
  // 被綁定元素插入父節點時調用(僅保證父節點存在，但是不一定插入文檔)
  inserted() {},
  // 所在組件的vnode更新時調用
  update() {},
  componentUpdated() {},
  unbind(el) {
    console.log(el, "el");
    el.removeEventListener("click", el._debounced);
  },
});

使用
 	<button
      v-debounce="[
        () => {
          btnHandler();
        },
        300,
      ]"
    >
      點擊
    </button> 
    <button v-if="testcom" v-debounce="[btnHandler, 300]">點擊</button>

讀到這里，這篇“vue全局注冊自定義指令防抖怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。