防连点的几个方法

1. 封装a-button

<script>
import { Button as AButton } from 'ant-design-vue'

export default {
 name: 'AButton',
 props: {
   ...AButton.props,
   delay: {
     type: Number,
     default: 3000
   }
 },
 data() {
   return {
     customLoading: false,
     ownDisabled: false
   }
 },
 computed: {
   allProps() {
     return Object.assign({}, this.$props, {
       loading: this.customLoading || this.loading,
       type: this.$props.type || 'primary'
     })
   },
    listeners() {
     return Object.assign({}, this.$listeners);
   }
 },
 methods: {
   async handler (...arg) {
        console.log('jajajajja')
     if (this.customLoading) return
     this.customLoading = true
     // this.ownDisabled = true
     console.log(this.$listeners,'111')
     const { click: preClick } = this.$listeners || {}
      if (typeof preClick !== 'function') {
       console.warn('click listener not found or is not a function');
       return;
     }
    if (this.timer) clearTimeout(this.timer);
     this.timer = setTimeout(() => {
       this.customLoading = false;
     }, this.delay);
     if (this.listeners.click) {
       this.listeners.click(...arg);
     }
     // const ret = preClick(...arg)
     // console.log(ret,'111111')
     // try {
     //   await Promise.resolve(ret)
     // } finally {
     //   this.customLoading = false
     //   let timer = setTimeout(() => {
     //     this.ownDisabled = false
     //     clearTimeout(timer)
     //     timer = null
     //   }, this.delay)
     // }
   }
 },
 render() {
   return (
     <AButton props={this.allProps} onClick={this.handler}>
       {this.$slots?.default}
     </AButton>
   )
 }
}
</script>

在main.js中注册这个组件就可以覆盖原来的a-button了
还有一个链接参考
防连点

2 接口cncel 防止连续请求
https://juejin.cn/post/6909390232803049486

3 新增vue插件 判断是否加防连点 提醒开发者

class CustomErrorPlugin {
    constructor(options) {
      this.options = options || {};
    }
  
    apply(compiler) {
      // 在 'emit' 钩子中触发错误，这个钩子会在 Webpack 生成文件之前调用
      compiler.hooks.emit.tapAsync('CustomErrorPlugin', (compilation, callback) => {
        // 检查你的条件
        const hasErrorCondition = this.checkCondition();
        if (hasErrorCondition) {
          // 添加错误到 compilation.errors 中
          compilation.errors.push(new Error('Custom error: Compilation failed due to some condition.'));
        }
        // 调用回调函数以继续编译
        callback();
      });
    }
  
    checkCondition() {
      // 在这里定义你的条件逻辑
      // 例如，你可以检查某个文件是否存在，或者检查环境变量
      // 这里只是一个简单的例子
      return true;
    }
  }
  
  module.exports = CustomErrorPlugin;
  

在vue.config.js中修改

const CustomErrorPlugin = require('./path/to/custom-error-plugin'); // 替换为实际路径

module.exports = {
  configureWebpack: {
    plugins: [
      new CustomErrorPlugin()
    ]
  }
};

这是一个判断button的示例

const fs = require('fs');
const path = require('path');

class CheckButtonLoadingPlugin {
  constructor(options = {}) {
    // 可以接收一些配置选项
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.emit.tapAsync('CheckButtonLoadingPlugin', (compilation, callback) => {
      // 遍历所有生成的文件
      let hasError = false;

      Object.keys(compilation.assets).forEach(filename => {
        const asset = compilation.assets[filename];
        if (path.extname(filename) === '.html' || path.extname(filename) === '.js') {
          const source = asset.source();

          // 使用正则表达式来查找 button 元素和 loading 属性
          const buttonWithLoadingRegex = /<button[^>]*\sloading\s*=\s*['"][^'"]*['"][^>]*>/gi;
          if (!buttonWithLoadingRegex.test(source)) {
            hasError = true;
            compilation.errors.push(new Error(`File ${filename} does not contain <button> elements with a loading attribute.`));
          }
        }
      });

      if (hasError) {
        // 如果找不到 loading 属性，则阻止编译
        callback(new Error('One or more files did not include <button> elements with a loading attribute.'));
      } else {
        // 继续编译
        callback();
      }
    });
  }
}

module.exports = CheckButtonLoadingPlugin;