zoukankan      html  css  js  c++  java
  • Vue防止按钮重复提交

    参考了:https://www.cnblogs.com/adbg/p/11271237.html

    方法:使用全局指令的方式。

    一、新建指令

      1、我们首先新建一个js文件,例如起名为plugins.js。

      2、然后我们写入以下内容,将preventReClick指令暴露出去。

    import Vue from 'vue'
    
    // 防止重复提交指令
    const preventReClick = Vue.directive('preventReClick', {
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3000)
          }
        })
      }
    })
    
    export { preventReClick }

    二、main.js引用

      然后我们在main.js引用这个指令,使其全局使用。 

    import { preventReClick } from '@/api/tool/plugins';

    三、使用

      在按钮加上v-prevent-re-click即可。

    <el-button type="primary" @click="submitForm" v-prevent-re-click></el-button>
  • 相关阅读:
    spring框架
    自己来到这个世界的天数
    迭代器
    String
    mybatis-plus条件参数
    Linux常用命令
    web.xml
    log4j.properties
    springmvc.xml
    applicationContext.xml
  • 原文地址:https://www.cnblogs.com/liuyu666/p/13266562.html
Copyright © 2011-2022 走看看