[JavaScript知识库]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>

阅读世界，共赴山海

423全民读书节，邀你共读