开门见山的说,先在components里面创建一个Loading.vue文件
内容如下
<template>
<div class="loading"></div>
</template>
<script>
export default {
name: 'Loading' // 定义的组件名称 使用时写法:loading
}
</script>
<style lang="scss" scoped>
.loading {
position: fixed;
left: 0;
top: 0;
background: url('../assets/image/loading11.gif') center center no-repeat #fff;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
现在去main.js中引入
import Loading from './components/Loading.vue';
Vue.component('v-loading', Loading);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
// components: { App, Loading },
render: h => h(App, Loading),
template: '<App/>'
})
现在直接来页面中写组件使用
<template>
<div class="detail">
<v-loading v-if="isLoading"></v-loading>
<div class="head">向胃猛冲,芜湖起飞</div>
</div>
</template>
用布尔值控制就好了
export default {
data () {
return {
isLoading: true
}
}
}
数据加载完成或者失败后就执行delay函数,就不会出现刚进入页面时没有数据展示的突兀情况了
methods: {
delay(){
setTimeout(() => {
this.isLoading = false;
}, 300);
}
}