vue自定义指令 v-debounce 防抖

vue自定义指令-防抖

使用场景：点击查询按钮 或者 点击提交保存按钮 的时候点击次数过多，会多次提交，为了避免这种情况发生，我们可以做个防抖，点击一次后 第二次需要间隔一定的时间才能再次点击。
这时候我们能想到可以用vue 的自定义指令directive来完成这个功能。
新建一个vue2项目 (cv即可使用)

src/components/HelloWorld.vue

<template>
  <div>
      <!-- v-debounce:xx ，xx可以是对象可以是字符串可以是数字   -->
      <button v-debounce:3000="debounceClick">防抖</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {},
  methods: {
    debounceClick(v) {
      console.log("触发一下，间隔多少毫秒：", v);
    },  
  },
};
</script>

新建 debounce.js文件 src/directive/modules/debounce.js

const debounce = {
  inserted: function (el, binding) {
   	// binding.arg 传进来的参数 可以
    let s = (binding.arg * 1) || 1000
    let timer
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value(s)
      }, s)
    })
  },
}
export default debounce

在src/directive/index.js里面引入 把 debounce.js 引入

import Vue from 'vue'
import debounce from './modules/debounce.js'
// 方式1
const files = require.context('./modules', false, /.+\.js$/)
// 按模块引入
// files.keys(): 打印出来为['./focus.js','/loadmore.js']
files.keys().forEach(fileName => {
  const directiveConfig = files(fileName) // 获取指令函数
  const directiveName = fileName // 获取指令名
    .replace(/^\.\//, '') // 去除开头的'./'
    .replace(/\.\w+$/, '') // 去除文件扩展名
  Vue.directive(directiveName, directiveConfig.default || directiveConfig)
})


// 方式2
// Vue.directive('debounce', debounce)

在main.js 里面引入 import '@/directive/index.js'

import '@/directive/index.js'
import App from './App.vue'
import Vue from 'vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')