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

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

v-debounce="getTableData"

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,
};

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

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)
? ? }
? }
}
// 只能綁定一個(gè)組件，多個(gè)組件無法綁定
Vue.component('Debounce', {
? abstract: true,//抽象組件，無狀態(tài)，
? props: ['time', 'events', 'immediate'],
? created () {
? ? this.eventKeys = this.events && this.events.split(',')
? ? this.originMap = {}
? ? this.debouncedMap = {}
? },
? render () {
? ? // 組件使用proxy對(duì)象包裝，可以了解 【this】；
? ? // 取出虛擬節(jié)點(diǎn)，默認(rèn)第一個(gè)，也就是高階組件中若傳遞了多個(gè)子組件，只展示第一個(gè)
? ? const vnode = this.$slots.default[0]
? ? // 如果默認(rèn)沒有傳 events，則對(duì)所有綁定事件加上防抖
? ? 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.directive("debounce", {
? // 只調(diào)用一次，第一次綁定元素時(shí)調(diào)用
? // el【綁定的元素】，binding【一個(gè)相關(guān)對(duì)象】，vnode【vue編譯生成的虛擬節(jié)點(diǎn)】
? // 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);
? },
? // 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用(僅保證父節(jié)點(diǎn)存在，但是不一定插入文檔)
? inserted() {},
? // 所在組件的vnode更新時(shí)調(diào)用
? update() {},
? componentUpdated() {},
? unbind(el) {
? ? console.log(el, "el");
? ? el.removeEventListener("click", el._debounced);
? },
});

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