vue项目中loading全局配置,(超方便)两种方法
第一种方法简单操作1、首先写一个公共组件,然后再建立一个js文件将其引入并使用js文件import topbar from '../components/navigation'export default (Vue) => {Vue.component('topbar', topbar)}2、最后在入口main.js引入这个js文件并使用import globalVue from './gl
·
第一种方法简单操作
1、首先写一个公共组件,然后再建立一个js文件将其引入并使用
js文件
import topbar from '../components/navigation'
export default (Vue) => {
Vue.component('topbar', topbar)
}
2、最后在入口main.js引入这个js文件并使用
import globalVue from './globalVue.js'
Vue.use(globalVue)
3、然后vue组件中直接使用即可
第二种方法一次封装,使用超方便
1、建立一个loading的文件夹,存放至少一个js一个vue文件,如果需要图片也可放在里面
2、vue文件(里面用的vant)
<template>
<div v-if="show">
<van-overlay class="box" :show="true">
<div class="wrapper" @click.stop>
<van-loading class="block" size="50" />
</div>
</van-overlay>
</div>
</template>
<script>
export default {
name: "Loading",
props: {
show: Boolean,
},
};
</script>
<style lang="scss" scoped>
.box {
width: 100vw;
height: 100vh;
position: fixed;
z-index: 9999;
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.block {
color: #6a72fe;
}
}
}
</style>
3、js文件
import Vue from "vue";
import componentLoading from "./loading.vue";
const comLoading = Vue.extend(componentLoading);
const instance = new comLoading({
el: document.createElement("div"),
});
instance.show = false;
const loading = {
show() {
instance.show = true;
document.body.appendChild(instance.$el);
},
hide() {
instance.show = false;
},
};
export default {
install() {
if (!Vue.$loading) {
Vue.$loading = loading;
}
Vue.mixin({
created() {
this.$loading = Vue.$loading;
},
});
},
};
4、在main.js入口文件直接引入并使用
import loadong from "./loading/loading";
Vue.use(loadong);
5、使用方法
全局使用:
this.$loading.show();
this.$loading.hide();
更多推荐
已为社区贡献1条内容
所有评论(0)