100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue 防止按钮重复点击

vue 防止按钮重复点击

时间:2021-02-10 20:40:09

相关推荐

vue 防止按钮重复点击

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);}})}})}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。