vue自定義指令防抖和節流

函數防抖和節流在平時業務中經常會用到，一般都是調用已經封裝好的方法，下面介紹一種新的思路：vue自定義指令！

下面這段代碼以防抖為例，el-input標簽直接寫上v-debounce,傳入arg參數：search和expression表達式：‘input’,1000。

seach為需要防抖的函數，'input'為綁定的事件名稱，1000(ms)表示防抖間隔時間。

<template>
    <el-input v-debounce:search="'input',1000" v-model="value"></el-input>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      value: ''
    }
  },
  methods:{
    search(){
      console.log(this.value)
    }
  }
}
</script>

在main.js中自定義指令：

防抖：

//coder__wang
Vue.directive("debounce", {
  inserted: (el, binding, vnode) => {
    const that = vnode.context,
          eventName = binding.expression.replace(/,(.+)/g, '').replace(/'/g, ''),
          delay = binding.expression.replace(/(.+),/g, '').replace(/'/g, ''),
          event = that[binding.arg];
    el.addEventListener(eventName, wUtil.debounce(event, delay)); //防抖
  }
});

這里拿到dom對象el，給其添加eventName事件，wUtil是我的函數工具庫：

下載： npm i wangs-utils 

使用： import * as wUtil from 'wangs-utils/dist/wang_utils'; 

本文用到的debounce、throttle可以參考鏈接

vnode.context為當前虛擬節點的上下文，即當前組件實例，可以訪問到頁面中聲明的search方法：

 binding包含自定義指令的一些信息，arg:search為指令參數名稱，expression: "'input',100"為指令右側的表達式字符串，在本方法中可以將expression分為eventName和delay

 這樣vue自定義指令的防抖就完成了，下面附上節流代碼（改一下防抖的指令名稱和方法名稱就ok）：

節流：

//coder__wang
Vue.directive("throttle", {
  inserted: (el, binding, vnode) => {
    const that = vnode.context,
          eventName = binding.expression.replace(/,(.+)/g, '').replace(/'/g, ''),
          delay = binding.expression.replace(/(.+),/g, '').replace(/'/g, ''),
          event = that[binding.arg];
    el.addEventListener(eventName, wUtil.throttle(event, delay)); //節流
  }
});

 

腳踏實地行，海闊天空飛~