基于weui loading插件封装

<!-- Loading.vue -->
<template>
  <div id="loadingToast" v-if="show">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
      <i class="weui-loading weui-icon_toast"></i>
      <p class="weui-toast__content" v-if="text">{{text}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    show: Boolean
  }
};
</script>

<style>
</style>
    

// loading.js
import LoadingComponent from './Loading.vue'

let $vm

export default {
  install(Vue, options) {
    if (!$vm) {
      const LoadingPlugin = Vue.extend(LoadingComponent);

      $vm = new LoadingPlugin({
        el: document.createElement('div')
      });

      document.body.appendChild($vm.$el);
    }

    $vm.show = false;

    let loading = {
      show(text) {
        $vm.show = true;
        $vm.text = text;
      },
      hide() {
        $vm.show = false;
      }
    };

    if (!Vue.$loading) {
      Vue.$loading = loading;
    }

    Vue.mixin({
      created() {
        this.$loading = Vue.$loading;
      }
    })
  }
}

// main.js

import Loading from 'views/common/baseui/loading'
Vue.use(Loading);

调用:

  mounted () {
    this.$loading.show();
    let _ = this
    setTimeout(() => {
       _.$loading.hide();
     }, 5000)
   },