第一步:编写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端