局部loading和全局loading动画都有各自的优缺点，下面分别进行介绍（都以elementUI动画为例）：
一、局部loading动画：
优点：
用户体验好：局部loading动画只在需要加载的区域显示，可以减少用户等待时间和焦虑感，提升用户体验。
页面性能高：局部loading动画只在需要加载的区域显示，可以减少不必要的资源浪费和页面加载时间，提升页面性能。
缺点：
实现难度高：实现局部loading动画需要对页面进行细致的划分和处理，增加了开发难度和工作量。
代码复杂度高：局部loading动画需要对页面进行多层嵌套和状态管理，增加了代码复杂度和维护难度。
实现方法：局部的要借用vuex来管理loading状态
vuex文件:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
//默认状态为false
loadingDisplay: false,
},
mutations: {
//官网说--更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
loadingShow(state, val) {
state.loadingDisplay = val;
},
},
actions: {},
modules: {},
});
export default store;
//还一种更改vuex中的状态方法写在了action里，好像是异步的，不知道有什么区别，就没有写在action里
封装的axios：
/**** request.js ****/
// 导入axios
import axios from 'axios'
//创建axios实例
const service = axios.create({
// 公共接口--接口地址重复的那一部分，比如地址和端口
baseURL: "/api",
// 超时时间 单位是ms，这里设置了10s的超时时间
timeout: 60 * 1000
})
//请求拦截器
service.interceptors.request.use(config => {
this.$store.commit("loadingShow",true)//修改vuex里loadingShow状态为true
config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
config.headers = {
'Content-Type': 'application/json' //配置请求头application/json
}
return config
}, error => {
Promise.reject(error)
})
//响应拦截器---接收到响应数据并成功后的一些共有的处理，关闭loading等
service.interceptors.response.use(response => {
this.$store.commit("loadingShow",false)//修改vuex里loadingShow状态为false
return response
})
在需要loading动画的vue页面里：
<template>
<div>
<el-table v-loading="loading">
<!-- 表格列定义 -->
</el-table>
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {
};
},
watch: {},
computed: {
//监听vuex中的loadingDisplay
isLoading(){
return this.$store.state.loadingDisplay
}
},
methods: {},
created() {},
mounted() {}
};
</script>
<style lang="scss" scoped>
</style>
二、全局loading动画：
优点：
实现简单：全局loading动画只需要在页面上覆盖一层遮罩，并在中心显示loading动画，实现简单。
状态管理简单：全局loading动画只需要对loading状态进行管理，代码逻辑简单。
缺点：
用户体验差：全局loading动画会覆盖整个页面，可能导致用户焦虑和等待时间增长，用户体验不好。
页面性能差：全局loading动画会影响整个页面的性能，尤其是在页面复杂或数据量大的情况下，可能会导致页面卡顿或崩溃。
实现方法：
全局的比较容易，大概原理就是在请求数据时在页面添加一层loading动画。直接使用emenentUI的loading组件。
axios有两个拦截器，分别是请求响应拦截器（request）和响应数据拦截器（response），所以我们要在请求拦截器里添加loading动画，在响应拦截器里结束loading动画
1.在封装axios文件里创建一个loading开始函数和结束函数
/**** request.js ****/
// 导入axios
import axios from 'axios'
// 使用element-ui loading组件
import { Loading } from 'element-ui';
let loading
//loading动画开始方法
function startLoading() {
//使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: "数据正在加载中...",
background: "rgba(255,255,255,0)",
});
}
//loading函数结束方法
function endLoading() {
//使用Element loading-close 方法
loading.close();
}
//创建axios实例
const service = axios.create({
// 公共接口--接口地址重复的那一部分，比如地址和端口
baseURL: "/api",
// 超时时间 单位是ms，这里设置了10s的超时时间
timeout: 60 * 1000
})
//请求拦截器
service.interceptors.request.use(config => {
startLoading();//开始loading动画
config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
config.headers = {
'Content-Type': 'application/json' //配置请求头application/json
}
return config
}, error => {
Promise.reject(error)
})
//响应拦截器---接收到响应数据并成功后的一些共有的处理，关闭loading等
service.interceptors.response.use(response => {
endLoading(); //关闭loading动画
return response
})
综上所述，局部loading和全局loading动画都有各自的优缺点，选择哪种方式需要根据具体的业务需求和用户体验来进行选择。
我自我感觉局部loading好，但是能点击其他地方，会不会有什么其他bug就不知道了，而且比较麻烦，所以暂时就不改成局部的了。
