视频教程 vue2封装全局loading组件_哔哩哔哩_bilibili
在components 下面新建一个文件夹loading
loading.js 和 index.vue
index.vue
<template>
<transition name="animation">
<div :style="{background:background}" v-if="visable" class="loaidng">
<div>
{{text}}
</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
visable: false,
text: "loading...",
background: "rgba(0,0,0,.3)",
};
},
};
</script>
<style>
.animation-enter,
.animation-leave-to {
opacity: 0;
}
.animation-enter-active,
.animation-leave-active {
transition: opacity 0.6s;
}
.loaidng {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
}
</style>
loading.js
import Vue from 'vue'
import loading from './index.vue'
const $app = Vue.extend(loading)
const $loading = new $app().$mount(document.createElement('div'))
document.body.appendChild($loading.$el)
export default {
install(vm) {
vm.prototype.$loading = {
show: (params) => {
Object.keys(params).forEach(key => {
$loading[key] = params[key]
})
$loading.visable = true
},
hide: () => {
$loading.visable = false
}
}
}
}
主要用到了Vue 的构造器extend 他可以接受一个已有组件也可以自定义组件
返回一个实例 这个实例需要一个容器 我们创建一个 div
然后挂载到body 下面
Vue.use 接受一个install 函数 他会给你注册一个vue 的放到install的第一个参数
main js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import $loading from '@/components/loading/index.js'
Vue.config.productionTip = false
Vue.use($loading)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')