vue 防止按钮重复点击
在后台使用过程中,经常会因为按钮重复点击,而造成发送多次重复请求 以下方法可以避免这种情况
在man.js写入一下代码
//重复点击指令 <el-button type="primary" @click="onSubmit" v-preventReClick>查询</el-button> v-preventReClick=“1000”//在按钮上加入v-preventReClick可以达到防止重复提交的目的,v-preventReClick=“1000”为1秒内禁止提交import preventReClick from './utils/preventRepeatClick.js'Vue.use(preventReClick);
在utils文件夹里创建preventRepeatClick.js,以下代码是preventRepeatClick.js里的代码
export default {install (Vue) {Vue.directive('preventReClick', {inserted(el, binding) {el.addEventListener('click', () => {if(!el.disabled) {el.disabled = true;setTimeout(() => {el.disabled = false;}, binding.value || 1000);}})}})}}