微信小程序封装loading 修改

1.  custom-loading.vue

2.loading.js  

import Vue from 'vue'
import CustomLoading from './custom-loading.vue'

const LoadingConstructor = Vue.extend(CustomLoading)
let loadingInstance = null

export const showLoading = (options = {}) => {
  if (loadingInstance) return
  
  loadingInstance = new LoadingConstructor({
    el: document.createElement('div'),
    propsData: {
      visible: true,
      text: options.text || '加载中...',
      color: options.color || '#1e7061'
    }
  })
  
  document.body.appendChild(loadingInstance.$el)
  
  // 超时自动关闭
  if (options.timeout) {
    setTimeout(() => {
      hideLoading()
    }, options.timeout)
  }
}

export const hideLoading = () => {
  if (loadingInstance) {
    loadingInstance.visible = false
    setTimeout(() => {
      if (loadingInstance.$el && loadingInstance.$el.parentNode) {
        loadingInstance.$el.parentNode.removeChild(loadingInstance.$el)
      }
      loadingInstance.$destroy()
      loadingInstance = null
    }, 300)
  }
}

// 全局混入
Vue.mixin({
  methods: {
    $showLoading(options) {
      showLoading(options)
    },
    $hideLoading() {
      hideLoading()
    }
  }
})

3.引用

    import CustomLoading from '@/workpages/components/custom-loading.vue'