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全局注册自定义指令防抖怎么实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。