vue之elementui的异步表单,防抖,节流验证,之做进vuex之actions
1>vue页面
data() { let validcodeName = (rule, value, callback) => { let parmas = { name: value, rule: rule, callback: callback }; this.getProjectByName(parmas); }; return { rules: {
//注意,不管是防抖还是节流,都得在这里去加,不能加在validcodeName里面
demandName: [{ required: true, validator: this.debounce(validcodeName, 1000), trigger: 'change' }],
}
}
methods: {
...mapActions(['getFunctionByName']),
//发送请求
sendGetFunctionByName(rule, value, callback) {
let parmas = {
name: value,
projectId: this.$route.query.id,
type: '需求',
rule: rule,
callback: callback
};
this.getFunctionByName(parmas);
},
//防抖
debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延时器
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(that, args);
}, delay);
};
},
//节流
throttle(fn, wait) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
timer = null;
}, wait);
}
};
},
actions
actions: { getProjectByName(context, data) { console.log("22", data); let params = { name: data.name }; SourceMirror.getProjectByName(params).then(res => { if (res.data.data === false) { data.callback(new Error("项目名称已重复")); } else if ( data.name == undefined || data.name == "" || data.name == null ) { data.callback(new Error("请输入项目名称")); } else { data.callback(); } context.commit("verifProjectByName", res.data.data); }); } },
2>场景,blur的input离开就发送修改接口,但是与页面上其他事件冲突,必须请求完了才允许点,这时候就需要防抖了
<input :class="{'isFocus':isFocus|| detail.expectHours}" id="inputRef" :disabled="saveHandleStatus==4" v-model="detail.expectHours" @focus="isFocus= true" @blur="debounce(hoursBlur,2000)()" // class="hours" :placeholder="placeholder" />
@blur="debounce(hoursBlur,2000)()" //注意这个写法,不这样写,不执行