vue之项目中如何封装loading加载效果

在Vue项目中，封装loading加载效果可以提高页面交互体验，用户操作体验更加流畅。

以下是封装loading加载效果的完整攻略：

1. 创建全局Loading组件

我们可以使用Vue的全局组件来封装loading效果。首先，创建一个loading组件，例如：

<template>
  <div class="loading-mask">
    <div class="loading-spinner"></div>
  </div>
</template>

<style>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.loading-mask.show {
  opacity: 1;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-left-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: loading-spinner 0.8s linear infinite;
}

@keyframes loading-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

该组件包含一个半透明的遮罩，以及一个旋转的loading图标。默认情况下，该组件不显示。

2. 注册全局Loading组件

我们需要将loading组件注册为全局组件，这样就可以在任何地方使用该组件。

import Vue from 'vue';
import Loading from './Loading.vue';

// 注册全局组件
Vue.component('Loading', Loading);

这样，我们就可以在任何Vue组件中使用<Loading />标签来显示loading效果了。

3. 在全局Vue实例中添加loading状态

为了实现全局loading效果，我们需要在Vue实例中添加loading状态。

import Vue from 'vue';
import Loading from './Loading.vue';

// 注册全局组件
Vue.component('Loading', Loading);

const app = new Vue({
  el: '#app',
  data: {
    loading: false, // 加载状态
  },
});

我们将loading属性初始化为false，表示加载状态为关闭。

4. Loading绑定到路由导航事件上

我们需要在每次路由导航时，自动开启和关闭loading效果。

import Vue from 'vue';
import Loading from './Loading.vue';

// 注册全局组件
Vue.component('Loading', Loading);

const app = new Vue({
  el: '#app',
  data: {
    loading: false, // 加载状态
  },
});

// 路由导航前
router.beforeEach((to, from, next) => {
  // 开启loading效果
  app.loading = true;
  next();
});

// 路由导航后
router.afterEach(() => {
  // 关闭loading效果
  app.loading = false;
});

在每次路由导航前，我们将loading状态设置为true，表示正在加载。在路由导航后，我们将loading状态设置为false，表示加载已完成。

5. 使用全局Loading组件

现在我们已经可以使用全局loading组件来显示loading效果了。在需要显示loading效果的组件中，可以按如下方式使用：

<template>
  <div>
    <!-- 其他组件内容 -->
    <Loading v-if="loading" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    fetchData() {
      // 开始加载数据
      this.loading = true;
      // 获取数据，此处省略
      // 关闭loading
      this.loading = false;
    },
  },
};
</script>

在该组件中，我们使用<Loading v-if="loading" />标签来引入全局loading组件，并使用loading属性来控制其显示和隐藏。

示例1：CodePen 压测官

示例2：Vue Element Admin