vue @click 多次触发解决
场景:提示:同事写了个普通的点击事件:例如:@click="xxx"xxx是点击事件要执行的 结果每次点击就会触发两次问题描述提示:这里描述项目中遇到的问题:。解决方案:提示:这里填写该问题的具体解决方案:例如:@click="xxx($event)"xxx(e){e.preventDefault();}当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once
·
场景:
提示:同事写了个普通的点击事件:
例如:@click="xxx" xxx是点击事件要执行的 结果每次点击就会触发两次
解决方案1:
提示:e.preventDefault:
例如:
@click="xxx($event)"
xxx(e){
e.preventDefault();
}
当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法
解决方案2:disabled
提示:设置不可见执行成功之后再放开:
html:
<el-button type="primary" :disabled="disabled" :size="GLOBAL.topButtonSize" @click="saveArea"
><i class="iconfont icon_save"></i><font>保存</font>
</el-button>
js:
//保存信息
saveArea(){
this.isLoading=true;
this.disabled =true
saveUserAareWithFlag({"userAreaList":userAreaList,userId:this.userInfo.userId,flag:this.flag}).then((res)=>{
if (res.data.code == 0) {
this.$notify({
title: '成功',
message: '保存成功',
type: 'success'
});
this.isLoading=false;
this.disabled =false
this.$emit('setNodeClick');
this.$emit('closeEditBox');
} else {
this.isLoading=false;
this.disabled =false
this.$notify({
title: '失败',
message: res.data.message,
type: 'error'
})
}
})
},
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)
}
})
}
})
}
}
// 防抖
export const Debounce = (fn, t) => {
let delay = t || 500;
let timer;
console.log(fn)
console.log(typeof fn)
return function () {
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
};
// 节流
export const Throttle = (fn, t) => {
let last;
let timer;
let interval = t || 500;
return function () {
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, interval);
} else {
last = now;
fn.apply(this, args);
}
}
};
当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法。另外也可以在点击时起一个变量 用来锁定 当你需要再次操作时在放开例如方案2里js部分。
更多推荐
已为社区贡献2条内容
所有评论(0)