VUE防止多次点击,重复请求
VUE防止多次点击,重复请求添加自定义文件 preventReClick.jsimport Vue from 'vue'const preventReClick = Vue.directive('preventReClick', {inserted: function (el, binding) {el.addEventListener('click', () => {if (!el.dis
·
VUE防止多次点击,重复请求
添加自定义文件 preventReClick.js
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
});
export { preventReClick }
需要的文件引入
import preventReClick from './store/preventReClick' //防多次点击,重复提交
<el-button class="common-button" size="small" type="primary" @click="handleSave('form')" v-preventReClick>保 存</el-button>
vue 中使用防抖和节流,防止重复点击或重复上拉加载
/**
* 函数防抖 (只执行最后一次点击)
* @param fn
* @param delay
* @returns {Function}
* @constructor
*/
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);
}
};
/**
* 函数节流
* @param fn
* @param interval
* @returns {Function}
* @constructor
*/
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);
}
}
};
用法
methods:{
getAliyunData:Throttle(function(){
...
},1000),
}
``
更多推荐
已为社区贡献1条内容
所有评论(0)