当前位置：首页 > VUE

vue实现加载中

2026-02-19 00:04:28VUE

Vue 实现加载中效果的方法

在 Vue 中实现加载中效果可以通过多种方式完成，以下是一些常见的方法：

使用 v-if 或 v-show 控制加载状态

通过绑定一个布尔值来控制加载中的显示与隐藏。当数据加载时，将布尔值设为 true，加载完成后设为 false。

<template>
  <div>
    <div v-if="isLoading" class="loading-spinner">
      加载中...
    </div>
    <div v-else>
      内容已加载
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

使用第三方库如 Element UI 或 Vuetify

vue实现加载中

这些 UI 库提供了现成的加载组件，可以快速实现加载效果。

<template>
  <div>
    <el-button @click="showLoading">显示加载</el-button>
    <el-button @click="closeLoading">关闭加载</el-button>
    <el-loading v-model="isLoading"></el-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    showLoading() {
      this.isLoading = true
    },
    closeLoading() {
      this.isLoading = false
    }
  }
}
</script>

自定义加载动画

vue实现加载中

可以通过 CSS 或 SVG 创建自定义的加载动画，增加用户体验。

<template>
  <div>
    <div v-if="isLoading" class="custom-loader">
      <div class="spinner"></div>
    </div>
  </div>
</template>

<style>
.custom-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

使用异步组件和 Suspense

Vue 3 提供了 Suspense 组件，可以更好地处理异步加载状态。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script>
const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}
</script>

以上方法可以根据具体需求选择适合的方式来实现加载中效果。