自定义指令实现按钮防止重复提交请求

弹窗的确定按钮点击后新增数据，结果如果不是单击，而是一直点，则出现新增两条甚至多相同内容的数据的问题

解决方式：

创建自定义指令：

新建一个js文件如 debounce.js

const debounce = {
    install(Vue) {
        Vue.directive('debounce', {
            inserted: function (el, binding) {
                //防抖 事件延时1s触发
                // let timer
                // el.addEventListener('click', () => {
                //     if (timer) {
                //         clearTimeout(timer)
                //     }
                //     timer = setTimeout(() => {
                //         binding.value()
                //     }, 1000)
                // })

                //节流  事件触发后1s内不会再触发事件
                // let [fn, event = 'click', time = '1000'] = binding.value
                let timer, timeEnd
                el.addEventListener('click', () => {
                    if (timer) {
                        timeEnd = new Date().getTime()
                        if (timeEnd - timer > 1000) {
                            // fn(el.value)
                            binding.value();
                            timer = timeEnd
                        }
                    } else {
                        // fn(el.value)
                        binding.value();
                        timer = new Date().getTime()
                    }
                })
            },
        })

    }
}

export { debounce }

内容如上，采用的是节流方式：即单击一次后出发事件，连续单击的话只执行第一次，1秒内不会重复执行。

如果采用防抖的方式即注释掉的部分，它的逻辑是单击后延时执行，经验证不能防止重复提交请求。

然后为了全局使用，需要在main.js中引用这个文件，并挂载到vue上. 引用的时候注意路径。

//节流
import { debounce } from './js/debounce'
Vue.use(debounce)

接下来是在按钮中的使用

一般的按钮的话直接把@click=“方法名” 改写为 v-debounce="方法名" 就可以了

  <a-button type="primary" v-debounce="addModelOk" :loading="conloading"
            >保存</a-button
          >

本人项目使用的是antd组件库，这玩意的modal组件也就是弹窗中的确定按钮不能使用这个指令

所以如果想给弹窗的确定按钮加这个防重的功能的话就只能自定义modal的footer，不要使用自带的，也很简单

 <!-- 新增 & 修改 & 详情 -->
      <a-modal
        width="500px"
        v-model="addModel"
        okText="确认"
        cancelText="取消"
        :title="addModelTit"
        :maskClosable="false"
        :confirmLoading="conloading"
        closeable="true"
      >
        <div class="modal-item">
           这里写你的弹窗中的内容，表单啥的
        </div>
        <template slot="footer">
          <a-button @click="addModelCancel">取消</a-button>
          <a-button type="primary" v-debounce="addModelOk" :loading="conloading"
            >保存</a-button
          >
        </template>
      </a-modal>

这样就搞定了防重提交

自定义指令实现按钮防止重复提交请求

猜你喜欢