1.新建一个loading文件夹
2.在文件夹下建一个index.vue组件和loading.js文件
//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>
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 $loading from '@/components/loading/loading.js'
Vue.use($loading)
3.使用
//点击后打开,2s后自动关闭
loadingShow() {
this.$loading.show();
setTimeout(() => {
this.$loading.hide();
}, 2000);
},