VUE页面实现 loading

在 Vue 中实现 loading 可以通过以下几种方式：

1. 使用第三方组件库，如 Element UI、Ant Design Vue 等，这些组件库已经内置了 loading 组件，只需要按照文档使用即可。

2. 自定义 loading 组件。创建一个名为 Loading.vue 的组件，使用 CSS 实现 loading 效果，并在需要使用 loading 的页面中引入该组件。组件代码如下：

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

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #f7dc6f;
  animation: spin 1s ease-in-out infinite;
}

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

3. 使用 Vue 自带的 v-if 指令实现 loading。在需要加 loading 的组件中定义一个 loading 变量，通过 v-if 指令控制 loading 的显示/隐藏。示例代码如下：

<template>
  <div>
    <div v-if="loading" class="loading">Loading...</div>
    <div v-if="!loading" class="content">页面内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true // 初始为 loading 状态
    };
  },
  mounted() {
    // 模拟异步请求数据
    setTimeout(() => {
      this.loading = false; // 数据加载完毕，显示页面内容
    }, 2000);
  }
};
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  /* 页面内容样式 */
}
</style>