vue自定义防抖节流的指令

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>

版权声明:本文为Fiona_lms原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。