精华内容
下载资源
问答
  • vue重复提交
    千次阅读
    2021-08-18 14:36:02

            1秒内只能提交一次

    1、创建js文件preventReClick.js

    export default {
      install (Vue) {
        // 防止重复点击
        Vue.directive('preventReClick', {
          inserted (el, binding) {
            // console.log("binding-7", binding)
            el.addEventListener('click', () => {
              if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                  el.disabled = false
                }, binding.value || 2000)
              }
            })
          }
        })
      }
    }

    2、在main.js中引入

    import Vue from 'vue';
    import preventReClick from './preventReClick'
    
    Vue.use(preventReClick);

    3、在index.vue文件中使用,注意一定要用button按钮

     v-preventReClick="1000"//表示1秒内只能提交一次
    
    <button @click="submit" class="submit" v-preventReClick="1000">
       <p class="submit_text">点击提交</p>
    </button>
    

    更多相关内容
  • 主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细,需要的朋友可以参考下
  • springboot2.1+redis+拦截器 防止表单重复提交详细完整介绍,所用到的文件都上传了,下载即可使用。自己花了半天整理,并且测试通过,使用在实际项目中的,希望对每一个下载的朋友有帮助。
  • Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding....
    Vue.directive('preventReClick', {
    inserted(el, binding) {
    el.addEventListener('click', () => {
    if (!el.disabled) {
    el.disabled = true
    setTimeout(() => {
    el.disabled = false
    }, binding.value || 3000)
                    }
                })
               }
            });

    在需要用到该功能的地方直接使用参数v-preventReClick即可,v-preventReClick默认3秒,可以自己设定如:v-preventReClick='2000'

    展开全文
  • Vue防止表单重复提交

    千次阅读 2019-06-13 09:26:13
    ,可能会导致表单重复提交(反正我是遇到过), 应该 setTimeout(function () { //alert(2); v.isDisabled = false; },3000); 给个延迟时间。 第二种效果,按钮只能点击一次,第二次点击没有反应

    有两种方法

     

        <!DOCTYPE html>
        <html>
        <head>
            <title>页面</title>
            <meta http-equiv="Content-Type" content="textml; charset=UTF-8">
            <meta name="viewport"
                  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <script type="text/javascript" src="../js/jquery.min.js"></script>
            <!--vue JS-->
            <script src="../../static/js/vue.min.js"></script>
            <!--VUE表单校验JS-->
            <!--<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>-->
            <script src="../../static/js/vee-validate.min.js"></script>
        </head>
        <body class="loading">
        <div class="wrapper">
            <div class="whole">
                <div class="zhuanz">
                    <!--<form id="fm" @submit.prevent="validateBeforeSubmit" method="post">-->
                    <form id="fm" method="post">
                        <strong style="text-align:center; ">
                            <!--第一种-->
                            <input type="button" @click="validateBeforeSubmit()" :disabled="isDisabled" value="确认提交">
                            <!--第二种-->
                            <!--<input  type="button" @click.once="validateBeforeSubmit()"  value="确认提交">-->
                        </strong>
                    </form>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                Vue.use(VeeValidate, {
                    locale: "zh_CN",//中文
                });
               var v= new Vue({
                    el: '#fm',
                    data: {isDisabled: false},
                    methods: {
                        validateBeforeSubmit() {
                            // 禁用按钮
                            this.isDisabled = true;
                            // DOM 还没有更新
                            /*this.$nextTick(function () {
                                // DOM 现在更新了
                                var _this = this;
                            });*/
    
                            alert(1);
                            // 启用按钮
                            // this.isDisabled = false;
                            /*setTimeout(function () {
                                alert(2);
                                v.isDisabled = false;
                            },3000);*/
                        }
                    }
                });
            });
    
        </script>
        </body>
        </html>
    

    第一种效果,按钮直接禁用,不能点击。

    注意:

    如果启用按钮this.isDisabled = false;,可能会导致表单重复提交(反正我是遇到过),

    应该
    setTimeout(function () {
        //alert(2);
        v.isDisabled = false;
    },3000);
    

    给个延迟时间。

    第二种效果,按钮只能点击一次,第二次点击没有反应

    展开全文
  • // 阻止按钮重复提交 import Vue from 'vue' // 阻止按钮重复提交 Vue.directive("button", { bind: function (el, binding, vnode) { // 每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次 ...

    第一步、新建一个文件,directive.js

    // 阻止按钮重复提交
    import Vue from 'vue'
    
    // 阻止按钮重复提交
    Vue.directive("button", {
        bind: function (el, binding, vnode) { // 每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
            function clickHandler(e) {
                // 这里判断点击的元素是否是本身,是本身,则返回
                if (el.contains(e.target)) {
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, binding.value || 3000)
                    }
                    return false;
                }
                // 判断指令中是否绑定了函数    // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
                if (binding.expression) {
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = clickHandler;
            document.addEventListener('click', clickHandler);
        },
        unbind(el, binding) {   // 解除事件监听
            document.removeEventListener('click', el.__vueClickOutside__);
            delete el.__vueClickOutside__;
        },
    })

    第二步、在main.js中引入directive.js文件

    第三步、在页面中使用v-button快捷指令

     

    展开全文
  • 这次给大家带来如何处理vue按钮多次点击重复提交数据,处理vue按钮多次点击重复提交数据的注意事项有哪些,下面就是实战案例,一起来看一下。事件分为两种情况:•第一种: 不操作数据型•第二种:...
  • VUE防止多次点击,重复请求 preventReClick
  • vue防止表单重复提交,节流函数

    千次阅读 2020-09-21 13:51:06
    有的时候网速不好,或者用户习惯不好的时候喜欢双击按钮,就会造成表单重复提交多次,看下图 然后添加了个节流函数,这样在短时间内点击的话,只会执行一次,上代码: /** * 节流函数 在规定的时间内请求函数...
  • 这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细,需要的朋友可以参考下。 这个其实是一个很细节的问题。 如果我们操作一个按钮,然后在按钮点击的时候绑定事件...
  • vue防止重复提交

    2021-06-25 10:23:07
    一、新建自定义文件...import Vue from 'vue' const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) {
  • 按钮防止重复点击
  • vue防止按钮重复提交

    千次阅读 2021-05-08 14:14:30
    可能会说,客户看不到反应,在点击按钮的时候我给他提示不就好了,但这并不是最合适的方法,还会导致重复提交。 一个项目不可能只有一个提交,所以难道每次都需要一段JS去控制他重复提交的代码吗,我们可以使用全局...
  • 按钮多次点击时,不进行节流操作的话,会导致重复提交或者请求,这时就需要控制,在某一个时间段内,只执行一次操作 编写指令 在项目中添加一个plugins.js import Vue from 'vue' // 防止重复提交指令 const ...
  • vue 按钮多次点击重复提交数据

    千次阅读 2018-04-18 14:32:00
    这个其实是一个很细节的问题。 如果我们操作一个按钮,然后在按钮点击的时候绑定事件。 事件分为两种情况: 第一种: 不操作数据型 第二种: 操作数据型 &lt;template&gt; &...script
  • vue防止重复点击提交

    万次阅读 2018-05-17 18:39:41
    &lt;input type="button" name="" id="" @click="save()" value="发表评价" :disabled="isDisable"/&gt;data:()=&... k
  • 如何防止vue中按钮重复点击提交:在短时间内点击按钮多次,会造成重复提交,出现多条数据,以下就是我的解决办法......
  • vue2前端防重复提交

    2022-04-29 18:31:16
    vue2防重复提交
  • vue 防止表单重复提交

    2021-01-07 13:48:15
    import Vue from 'vue' const preventReClick = Vue.directive('preventReClick', { inserted: function(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true ...
  • vue防止多时间内多次点击按钮,重复提交表单,全局指令
  • 好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”,其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。
  • ## main.js //防止多次点击,重复提交 Vue.directive("preventReClick", { inserted(el, binding) { el.addEventListener("click", () => { if (!el.disabled) { el.disabled = true console.log(binding.value) ...
  • vue框架中防止用户重复提交表单的方法 在互联网应用中有效地阻止用户重复点击操作可以极大地提高系统的安全性和稳定性。为此,好友封装了一个专门用于提交表单和下载文件的按钮组件,为方便描述姑且称之为“防抖...
  • Vue 重复触发表单提交

    千次阅读 2018-08-03 17:04:58
    私信的组件多次点击发送按钮,造成同一条私信的重复发送 分析 在等待发送组件模态框自动关闭的过程中, 多次触发了发送按钮的click事件,导致多次发送了同样的数据 解决方案可以利用 form disabled属性 解决 ...
  • Vue防止按钮重复点击

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,557
精华内容 5,022
关键字:

vue重复提交

友情链接: sidebar.zip