大型门户网站建设所具有的功能模块主要有,学做网站视频论坛,ui界面设计图,个人做外贸接订单网站场景#xff1a;我们往往在项目中会因为表单重复提交而烦恼#xff0c;往往都会想到很高大上的两个词语——防抖、节流。但网上的很多方法都还是不够灵活、通用#xff0c;那么下面介绍一下我的方法#xff08;在最后#xff09;
页面loading
往往都是一个页面写一堆loa…场景我们往往在项目中会因为表单重复提交而烦恼往往都会想到很高大上的两个词语——防抖、节流。但网上的很多方法都还是不够灵活、通用那么下面介绍一下我的方法在最后
页面loading
往往都是一个页面写一堆loading代码请求前打开loading等请求后关闭这样会造成代码过度冗余写起来非常的~你懂得
export default {submit() {this.loading true;addInfo(this.form).then(res {this.data res.data;this.loading false;}).catch (e) {this.loading false;};}
}Vue指令
另一种方法就是写一个vue指令绑定到按钮上然后定时给按钮添加loading或禁用缺点也很明显直接写到组件上造成维护性太低并且loading和请求没有太大关系。
Vue.directive(prevent, {inserted(el, binding) {el.addEventListener(click, () {if (!el.disabled) {el.disabled truesetTimeout(() {el.disabled false}, binding.value || 2000)}})}
});全局请求loading
很多人都尝试将loading与组件关联起来但其实loading与请求结合才是根本所以何尝不在axios中做一下手脚呢。 我们可以利用axios的前置和后置拦截完成loading显示和关闭。
import axios from axios
import {Loading} from element-uiconst service axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 100000
});service.interceptors.request.use(config {if (config.loading) {// 判断loading参数然后打开全局LoadingLoading.service();}return config;},error {Promise.reject(error)}
)service.interceptors.response.use(res {// 响应关闭Loadingconst loading Loading.service();loading.close();return res.data;},error {// 报错关闭Loadingconst loading Loading.service();loading.close();return Promise.reject(error);}
)
