基于weuil oading插件封装

Posted 2022-01-19 qiezuimh

 

<!-- 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)
   ,