vue中全局引入loading并使用

1.创建loading.vue文件

<template>
  <div class="loading"></div>
</template>
<script>
export default {
  name: "loading"
};
</script>
<style lang="scss" scoped>
.loading {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  background: url("https://goplastic.oss-cn-beijing.aliyuncs.com/goplasticCommon/loading.gif")
    center center no-repeat rgba($color: #000000, $alpha: .5);
  background-size: 3%;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
</style>

2.main.js中引入并挂载

import loading from "@/components/loading";

Vue.component("loading",loading);

3.页面使用

<loading v-if="isLoading"></loading>
//初始化  isLoading=true 数据加载完=false