Vue 禁止按钮多次点击 重复提交数据(指令实现)

全局定义,方便调用

新建plugins.js

复制代码
复制代码
export default {
  install (Vue) {
    // 防重复点击(指令实现)
    Vue.directive('preventReClick', {
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3000)
          }
        })
      }
    })
  }
}
复制代码
复制代码

在main.js引用

按钮调用直接加v-preventReClick

<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick></el-button>

亲测可用

本文作者:seven&night

本文链接:https://www.cnblogs.com/bisiyuan/p/16080456.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   seven&night  阅读(679)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 晴天 刘瑞琦
晴天 - 刘瑞琦
00:00 / 00:00
An audio error has occurred.