1、封装一个组件
具体代码如下
<template>
<div class="loading">
<!-- <img src="../assets/img/load.gif" alt="" /> -->
<van-loading color="#ffffff" class="loadingVant" vertical type="spinner"
>加载中...</van-loading
>
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {};
},
};
</script>
<style scoped>
.loading {
position: fixed;
top: 0;
left: 0;
z-index: 121;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
text-align: center;
}
.loading img {
width: 1rem;
height: 1rem;
margin: 7.5rem auto;
}
</style>
2、vuex添加方法
3、请求拦截使用vuex的方法
4、app.vue映入组件和vuex定义的值