基于Vue 实现一个中规中矩loading组件

当我们在Vue项目中需要在异步请求或耗时操作进行时，给用户一个等待提示是一种不错的用户体验。本文将详细讲解如何基于Vue实现一个中规中矩的loading组件，希望能帮助大家实现这个功能。

步骤一：创建组件文件

创建一个名为Loading.vue的文件，用于编写loading组件代码。可以使用Vue CLI创建一个新组件，或者手动在项目的components目录下创建该文件。

步骤二：编写组件代码

HTML代码：

下面是loading组件的HTML代码：

<template>
  <div class="loading">
    <div class="loader"></div>
  </div>
</template>

CSS样式

下面是loading组件的CSS样式：

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
}

.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript代码

下面是loading组件的JavaScript代码：

<script>
export default {
  name: "loading",
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
};
</script>

该组件接受一个名为show的props属性，该属性为Boolean类型，用于控制loading组件的显示和隐藏。

步骤三：在需要的地方使用loading组件

为了使用loading组件，我们需要在需要调用异步请求方法时，在对应的组件中使用loading组件。

示例1：在异步请求中使用

下面是一个例子，演示了如何在异步请求中使用loading组件：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <loading :show="loadingFlag"></loading>
    <div v-if="!loadingFlag">数据显示区域</div>
  </div>
</template>

<script>
import Loading from "@/components/Loading";

export default {
  name: "async-component",
  components: {
    Loading
  },
  data() {
    return {
      loadingFlag: false
    };
  },
  methods: {
    getData() {
      this.loadingFlag = true;
      // 执行异步请求
      axios
        .get("https://jsonplaceholder.typicode.com/todos")
        .then(resp => {
          this.loadingFlag = false;
        });
    }
  }
};
</script>

在异步请求前将loadingFlag设置为true，异步请求结束后将loadingFlag设置为false。在template中使用loading组件，并将loadingFlag作为props属性传递给loading组件。在显示数据的地方使用v-if指令，在loadingFlag为false时才会显示数据区域。

示例2：在路由导航中使用

下面是一个例子，演示了如何在路由导航中使用loading组件：

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <loading :show="loadingFlag"></loading>
    <router-view @beforeRouteEnter="beforeEnter" @afterRouteEnter="afterEnter"></router-view>
  </div>
</template>

<script>
import Loading from "@/components/Loading";

export default {
  name: "nav-component",
  components: {
    Loading
  },
  data() {
    return {
      loadingFlag: false
    };
  },
  methods: {
    beforeEnter() {
      this.loadingFlag = true;
    },
    afterEnter() {
      this.loadingFlag = false;
    }
  }
};
</script>

在路由导航的代码中，使用了Vue Router自带的导航钩子函数beforeRouteEnter和afterRouteEnter。beforeRouteEnter用于在切换路由前执行一个异步操作，该示例中将loadingFlag设置为true。afterRouteEnter用于在进入路由之后执行一个操作，该示例中将loadingFlag设置为false。在组件的template中使用loading组件即可实现loading效果。

本文详细讲解了如何基于Vue实现一个中规中矩的loading组件，并提供了两个使用示例。希望读者们可以通过本文的介绍，掌握如何实现loading组件。