前言
最近公司项目需要开发一个全局loading组件,之前没有做过类似的功能,通过百度东拼西凑完成了这个功能,但是也是知其然而不知其所以然,所以今天抽空来整理学习下。
Demo
首先在components文件夹下新建一个loading文件夹,该文件夹下包含Index.vue和Index.js两个文件。
Index.vue
<template>
<div class="loading" v-if="show">
<van-loading type="spinner" size="100px" color="#1989fa" vertical>努力加载中...</van-loading>
</div>
</template>
<script>
export default {
name: "Loading",
props: {
show: Boolean
},
};
</script>
<style lang="scss" scoped>
.loading {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 1);
.van-loading {
top: 50%;
transform: translate(0, -50%);
.van-loading__text {
margin: 15px 0 0 0;
font-size: 18px;
}
}
}
</style>
Index.js
import Vue from "vue"
import loadingComponent from "./Index.vue"
// 引入组件的.vue文件创建构造器
let LoadingConstructor = Vue.extend(loadingComponent)
// 渲染并且随后挂载
let instance = new LoadingConstructor().$mount()
document.body.appendChild(instance.$el)
instance.show = false
let loading = {
show() {
instance.show = true
},
hide() {
instance.show = false
}
}
// 注册组件
export default {
install() {
if (!Vue.$loading) {
Vue.$loading = loading
}
Vue.mixin({
created() {
this.$loading = Vue.$loading
}
})
}
}
然后在main.js里面引入一下该组件。
main.js
// 引入loading
import Loading from "@/components/Loading/Index.js"
Vue.use(Loading);
因为项目需要,所以这边引用了VantUi框架做了个全屏loading,你们可以根据自己项目进行修改,然后就可以使用this.$loading.show()
和this.$loading.hide()
来操作全局loading组件了。