直接上代码:
<!--
用法:
this.$store.commit('showLoading', true);展示
this.$store.commit('showLoading', false);不展示
<div class="main">
<Loading v-show="isLoading" />
</div>
.main{
position: relative;
}
-->
<template>
<div class="loading">
<div class="loading-layer"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594987125387&di=bf0899070555ffe803df2da2d11f3025&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3458475739%2C295617657%26fm%3D214%26gp%3D0.jpg"
</div>
</template>
<script>
export default {};
</script>
<style>
.loading-layer {
height: 100%;
width: 100%;
}
.loading {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
border-radius: 0 !important;
background-color: rgba(0, 0, 0, 0) !important;
padding: 0 !important;
}
.loading .loading-layer {
background-color: rgba(0, 0, 0, 0.2);
}
.loading img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 101;
}
</style>
vuex写法:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLoading: false
},
mutations: {
showLoading(state,isLoad) {
state.isLoading = isLoad
}
},
actions: {}
});