问题:用户点击保存时,可能会多次点击。导致生成重复数据。
目标:多次点击时,1s内只允许提交一次数据。
解决方案:
1、创建js文件preventReClick.js
html
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中引入
html
import Vue from 'vue';
import preventReClick from './preventReClick'
Vue.use(preventReClick);
3、在.vue 文件中使用
html
<el-button
type="primary"
@click="submit()"
v-preventReClick="1000"
size="mini"
>{{ $t("m.确定") }}</el-button
>