美文网首页
vue3 防止重复提交 自定义指令

vue3 防止重复提交 自定义指令

作者: Amy_yqh | 来源:发表于2022-10-13 17:07 被阅读0次

该指令使用于按钮标签,也适应与非按钮标签

一、定义

preventReClick.ts

import type { DirectiveBinding } from 'vue'

export default (app: { directive: 
  (arg0: string, arg1: { mounted(el: HTMLElement, binding: DirectiveBinding<any>): void }) => void }) => {
  app.directive('preventReClick', {
    mounted(el:HTMLElement, binding:DirectiveBinding) {
      el.addEventListener('click', () => {
        if (el.style['pointer-events'] != 'none') {
          el.style['pointer-events'] = 'none'
          setTimeout(() => {
            el.style['pointer-events'] = 'all'
          }, binding.value || 1500)
        }
      })
    },
  })
}

二、在main.js引入

main.ts
import preventReClick from '@/utils/directives/preventReClick'

三、使用

aa.vue使用
<div
      v-preventReClick
      class="submit shadow-btn"
      @click="submitForm(ruleFormRef)"
    >
      提交
    </div>

相关文章

网友评论

      本文标题:vue3 防止重复提交 自定义指令

      本文链接:https://www.haomeiwen.com/subject/ptjzartx.html