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

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>


本文作者:admin

本文链接:https://www.javalc.com/post/57.html

版权声明:本篇文章于2021-03-03,由admin发表,转载请注明出处:分享你我。如有疑问,请联系我们

uniapp 请求封装

发表评论

取消
扫码支持
登录
用户名
密码
注册
用户名
密码(至少8位)
确认密码
昵称
邮箱(请填写常用邮箱)
获取邀请码
邀请码
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱