vue 引入自定义js组件并全局注册自定义指令, 防多次点击,重复提交


1 新建 preventReClick.js

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
});

export { preventReClick }

2,在main.js中引用

import '@/components/directive/preventReClick.js' // 防多次点击,重复提交指令,路径改为自己的,这里不加from ,不用use

3 在页面上使用

 <a-button @click="endStepHandle" v-preventReClick>结束</a-button>

默认是3秒,如果想要自己传时间,直接写时间就好了

// 传了个2秒
<a-button @click="endStepHandle" v-preventReClick="2000">结束</a-button>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM