版权声明:版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36157085/article/details/88020910
当在Vue项目,当向后台请求接口时,常常会使用 loding 过渡数据的加载时间。
如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中
App.vue
//App.vue
<template>
<div>
//other code...
<loading v-if='LOADING'/> //自己封装的loading 组件
</div>
</template>
该 组件通过 Loading的状态显示隐藏。我们希望在请求某个接口的时候,将 Loading改为true,当接口请求后改为false,这样就能实现loading的过渡效果了。通过使用 vuex来修改Loading的状态
1.在App.vue的同层目录下新建一个 store.js
文件.
store.js
// store.js
const store = new Vuex.Store({
state: {
Loading: false
},
mutations: {
showLoading(state){
state.LOADING = true
},
hideLoading (state) {
state.LOADING = false
}
}
})
2.在 main.js
中引入 store.js
,并挂载到 Vue 实列上
main.js
//main.js
import store from './store'
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})
3.在请求中改变 Loading
状态
method() {
this.$store.commit("showLoading");
this.$axios({
method: "get",
url: "http://127.0.0.1:3000/..."
})
.then(result => {
this.$store.commit("hideLoading");
})
.catch(err => {
this.$store.commit("hideLoading");
console.log(err);
});
}
4.监听 LOADING
状态
Vuex 中 state是动态更新的,也就是不管在任何地方对某一个 state的值做了修改,那么依赖该数据的 DOM 也将会发生改变。修改 App.vue
文件,监听 Loading
的值的变化。
App.vue
//App.vue
<template>
<div id="app">
<router-view></router-view>
<loading v-if='Loading'/>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed:{
...mapState([
'Loading'
])
},
name: 'App'
}
</script>
简单的 loading 组件。
效果图:
loading.vue
<template>
<div id="body">
<div class='loader'>
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
<p>loading</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'loading'
}
</script>
<style scoped>
#body {
height: 100vh;
font-family: "微软雅黑";
text-align: center;
overflow: hidden;
}
h1 {
text-transform: uppercase;
font-size: 30px;
color: #576e81;
margin: 30px 0px 0px 0px;
}
h2 {
font-weight: normal;
font-size: 18px;
color: #f98db9;
margin: 10px 0px 0px 0px;
}
p {
margin: 0 auto;
}
.loader {
height: 250px;
position: relative;
margin: 220px auto;
width: 400px;
z-index: 10;
}
.loader_overlay {
width: 150px;
height: 150px;
background: transparent;
box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67),
0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
border-radius: 100%;
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loader_cogs {
z-index: -2;
width: 100px;
height: 100px;
top: -120px !important;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loader_cogs__top {
position: relative;
width: 100px;
height: 100px;
-webkit-transform-origin: 50px 50px;
transform-origin: 50px 50px;
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}
.loader_cogs__top div:nth-of-type(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.loader_cogs__top div:nth-of-type(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.loader_cogs__top div:nth-of-type(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loader_cogs__top div.top_part {
width: 100px;
border-radius: 10px;
position: absolute;
height: 100px;
background: #f98db9;
}
.loader_cogs__top div.top_hole {
width: 50px;
height: 50px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loader_cogs__left {
position: relative;
width: 80px;
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
top: 28px;
-webkit-transform-origin: 40px 40px;
transform-origin: 40px 40px;
-webkit-animation: rotate_left 10s 0.1s infinite reverse linear;
animation: rotate_left 10s 0.1s infinite reverse linear;
left: -24px;
height: 80px;
}
.loader_cogs__left div:nth-of-type(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.loader_cogs__left div:nth-of-type(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.loader_cogs__left div:nth-of-type(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loader_cogs__left div.left_part {
width: 80px;
border-radius: 6px;
position: absolute;
height: 80px;
background: #97ddff;
}
.loader_cogs__left div.left_hole {
width: 40px;
height: 40px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loader_cogs__bottom {
position: relative;
width: 60px;
top: -65px;
-webkit-transform-origin: 30px 30px;
transform-origin: 30px 30px;
-webkit-animation: rotate_left 10.2s 0.4s infinite linear;
animation: rotate_left 10.2s 0.4s infinite linear;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
left: 79px;
height: 60px;
}
.loader_cogs__bottom div:nth-of-type(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.loader_cogs__bottom div:nth-of-type(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.loader_cogs__bottom div:nth-of-type(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loader_cogs__bottom div.bottom_part {
width: 60px;
border-radius: 5px;
position: absolute;
height: 60px;
background: #ffcd66;
}
.loader_cogs__bottom div.bottom_hole {
width: 30px;
height: 30px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* Animations */
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate_left {
from {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
to {
-webkit-transform: rotate(376deg);
transform: rotate(376deg);
}
}
@keyframes rotate_left {
from {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
to {
-webkit-transform: rotate(376deg);
transform: rotate(376deg);
}
}
@-webkit-keyframes rotate_right {
from {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
to {
-webkit-transform: rotate(364deg);
transform: rotate(364deg);
}
}
@keyframes rotate_right {
from {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
to {
-webkit-transform: rotate(364deg);
transform: rotate(364deg);
}
}
</style>