uniapp 自定義 Loading

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);//隱藏