使用vue自定义指令实现防抖

原创已于 2024-07-25 17:05:25 修改 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-07-25 17:04:24 首次发布

框架：elementUi

方法一：使用自定义指令

a.在src新建文件夹directive，并新建文件throttle.js

/*
  按钮防抖自定义指令throttle.js
*/
export default {
  inserted(el, binding) {
    let throttleTime = binding.value; // 防抖时间
    if (!throttleTime) { // 用户若不设置防抖时间，则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
}

b.新建index.js,导入throttle.js

import throttle from './throttle/throttle'
const install = function(Vue) {
  Vue.directive('throttle', throttle)
}
if (window.Vue) {
  Vue.use(install); // eslint-disable-line
}
export default install

c.在main.js挂载

import directive from "./directive/.index.js"; // directive
Vue.use(directive);

实例：在vue页面使用vue自定义指令v-throttle

<pagination
        v-show="total > 0"
        :total="total"
        v-throttle:3000
        style="margin-bottom: 20px"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

方法二：使用lodash,在vue页面导入lodash，然后对函数使用

import { debounce } from "lodash";
method:{
	handleQuery: debounce(function () {
      this.queryParams.pageNum = 1;
      this.getList();
	}, 300),
}