vue 自定义组件

第一步：编写loading.js文件，代码如下

import Vue from 'vue'
import loadingComponent from '@/components/loading/loading.vue'
const LoadingConstructor = Vue.extend(loadingComponent);
const instance = new LoadingConstructor({
  el: document.createElement('div')
})
instance.show = false // 默认隐藏
const loading = {
  show(title='加载中...') { // 显示方法
    instance.show = true
    instance.title = title;
    document.body.appendChild(instance.$el)
  },
  hide(title='') { // 隐藏方法
    instance.title = title;
    instance.show = false
  }
}
export default {
  install() {
    if (!Vue.$loading) {
      Vue.$loading = loading
    }
    Vue.mixin({
      created() {
        this.$loading = Vue.$loading
      }
    })
  }
}

第二步：main.js引入import myloading from './components/loading/loading.js'

Vue.use(myloading);

第三步：组件中使用this.$loading.show()

注意：该组价写法适合非app端