vue自定义防抖节流的指令

最新推荐文章于 2025-06-04 14:01:23 发布

半夏ing

最新推荐文章于 2025-06-04 14:01:23 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Fiona_lms/article/details/124325533

vue 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了Vue.js中的两个自定义指令debounce和throttle，分别用于延迟和节流功能，通过实例展示了如何在按钮上应用并解释了其在前端开发中的常见用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default {
  install(Vue) {
    Vue.directive('debounce', {
      inserted: (el, binding) => {
        let delay = binding.args;
        if (!delay) {
          delay = 1000;
        }
        let time;
        el.addEventListener('click', () => {
          if (time) {
            clearTimeout(time);
          }
          time = setTimeout(() => {
            binding.value();
          }, delay);
        });
      },
    });
    Vue.directive('throttle', {
      inserted: (el, binding) => {
        let delay = binding.args;
        if (!delay) delay = 1000;
        let time = null;
        el.addEventListener('click', () => {
          if (!time) {
            time = setTimeout(() => {
              binding.value();
              time = null;
            }, delay);
          }
        });
      },
    });
  },
};

在这里插入图片描述
用法：

 <el-button
              type="primary"
              size="small"
              v-if="ifCanCheck"
              v-throttle:2000="getCreditRecord"
    >诚信记录接口</el-button>