给vue添加$loading的方法

// 全局添加
const LoadingComponent = Vue.extend({
  template: '<div id="loading-wrapper">{{msg}}<?div>',
  props:{
    msg:{
      type: String,
      default: 'loading...'
    }
  }
})
function Loading(msg) {
  const div = document.createElement('div')
  div.setAttribute('id','loading-wrapper')
  document.body.append(div)

  new LoadingComponent({
    props:{
      msg:{
        type: String,
        default: msg,
      }
    }
  }).$mount("#loading-wrapper")
  return ()=>{
    document.body.removeChild(document.getElementById("#loading-wrapper"))
  }
}
Vue.prototype.$loading = Loading
// vue安装后可直接使用
const loadingPlugin = {
  install: function(vm){
    const LoadingComponent = vm.extend({
      template: '<div id="loading-wrapper">{{msg}}<?div>',
      props:{
        msg:{
          type: String,
          default: 'loading...'
        }
      }
    })
    function Loading(msg) {
      const div = document.createElement('div')
      div.setAttribute('id','loading-wrapper')
      document.body.append(div)
    
      new LoadingComponent({
        props:{
          msg:{
            type: String,
            default: msg,
          }
        }
      }).$mount("#loading-wrapper")
      return ()=>{
        document.body.removeChild(document.getElementById("#loading-wrapper"))
      }
    }
    vm.prototype.$loading = Loading
  }

}
Vue.use(loadingPlugin)
new Vue({
  el: '#root',
  methods: {
    showLoading(){
      const hide = this.$loading('加载中。。。')
      setTimeout(()=>{
        hide()
      },2000)
    }
  }
})