弹窗的确定按钮 点击后新增数据,结果如果不是单击,而是一直点,则出现新增两条甚至多相同内容的数据的问题
解决方式:
创建自定义指令:
新建一个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>
这样就搞定了防重提交