侧边栏壁纸
博主头像
分享你我博主等级

行动起来,活在当下

  • 累计撰写 108 篇文章
  • 累计创建 13 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

VUE 使用自定义指令实现防止短时间内多次提交

管理员
2021-03-03 / 0 评论 / 0 点赞 / 5 阅读 / 1673 字

1、添加自定义JS文件:submitCheck.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 preventReClick from './common/submitCheck' //防多次点击,重复提交

3、使用:v-preventReClick

 <button type="submit" class="btn btn-primary" @click="$emit('ok')" v-preventReClick>{{confirmBtLable}}</button>


0

评论区