![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/63fdfef0d43b6e3141bed51b8e5a5db3.gif#pic_center)
components/m-loading/m-loading.vue
<template>
<view class="loading-box" v-show="show" @click="dismiss">
<image class="rotate" src="/static/loading.svg"></image>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
dismiss() {
this.$store.commit("showLoading", false);
},
},
computed: {
show() {
return this.$store.state.loading;
},
},
};
</script>
<style>
.loading-box {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
}
.loading-box image {
margin-bottom: 40px;
width: 180px;
height: 180px;
}
.rotate {
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
</style>
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
loading: false
},
mutations: {
showLoading(state, show) {
state.loading = show;
}
}
})
export default store
main.js
import Vue from 'vue';
import App from './App';
import store from "./store";
function showLoading(show) {
store.commit("showLoading", show);
}
Vue.prototype.$store = store;
Vue.prototype.$showLoading = showLoading;
Vue.config.productionTip = false;
App.mpType = 'app';
const app = new Vue({
store,
...App,
});
app.$mount();
static目录下放入loading 图片 static/loading.svg
index.vue
<template>
<view class="container">
<m-loading></m-loading>
</view>
</template>
js中使用
this.$showLoading(true)
this.$showLoading(false)
工具类中使用
import store from "store";
store.commit("showLoading", true);
store.commit("showLoading", false);