vue 防止按钮重复点击
vue 防止按钮重复点击在后台使用过程中,经常会因为按钮重复点击,而造成发送多次重复请求以下方法可以避免这种情况在man.js写入一下代码//重复点击指令<el-button type="primary" @click="onSubmit" v-preventReClick>查询</el-button>v-preventReClick=“1000”/...
·
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);
}
})
}
})
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)