vue封装插件（loading）
2020-02-16 本文已影响0人
默默小兵
第一步：创建loading.vue文件
<template>
<div v-show="show" class="container">
loading
</div>
</template>
<script>
export default {
data () {
return {
show: false,
}
},
methods: {
}
}
</script>
第二步：创建index.js文件
/*eslint-disable*/
import LoadingComponent from './loading.vue'
// let $vm
export default {
install (_Vue, options) {
const LoadingConstructor = _Vue.extend(LoadingComponent)
const instance = new LoadingConstructor() //创建alert子实例
instance.$mount(document.createElement('div')) //挂载实例到我们创建的DOM上
document.body.appendChild(instance.$el)
_Vue.prototype.$showLoading = (flag) => {
instance.show = flag;
}
}
}
第三步：在main.js文件挂载
第四部：页面中使用
