vue3之element-plus Button 按钮 防抖----自定义指令

1、src/utils 创建 btnAntiShake.ts

import { App } from 'vue';

export default (app: App<Element>) => {
  app.directive('preReClick', {
    mounted(el, binding) {
      el.addEventListener('click', () => {
        if (!el.disabled) {
          el.disabled = true;
          setTimeout(() => {
            el.disabled = false;
          }, binding.value || 2000);
        }
      });
    }
  });
};

2、main.ts 引入

import preReClick from '@/utils/btnAntiShake';
app.use(preReClick);

3、使用 元素上直接使用v-preReClick

<el-button v-preReClick class="sendMsg" @click="casereply()">
{{ $t('caseComment.send') }}
</el-button>