vue实现加载中

Vue 实现加载中效果的方法

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

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

通过数据绑定控制加载中的显示与隐藏，适用于简单的场景：

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

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

使用第三方库如 Element UI 或 Vuetify

这些 UI 框架提供了内置的加载组件，可以快速实现专业效果：

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

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

使用 CSS 动画实现自定义加载效果

通过 CSS 可以创建更个性化的加载动画：

<template>
  <div class="loading-container" v-if="isLoading">
    <div class="loading-spinner"></div>
  </div>
</template>

<style>
.loading-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>

使用全局加载状态管理

对于大型应用，可以通过 Vuex 管理全局加载状态：

// store.js
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, status) {
      state.isLoading = status
    }
  }
})

// 组件中使用
<template>
  <div>
    <div v-if="$store.state.isLoading">全局加载中...</div>
  </div>
</template>

结合 axios 拦截器实现自动加载

在请求时自动显示加载，请求完成隐藏：

// http.js
axios.interceptors.request.use(config => {
  store.commit('setLoading', true)
  return config
})

axios.interceptors.response.use(response => {
  store.commit('setLoading', false)
  return response
}, error => {
  store.commit('setLoading', false)
  return Promise.reject(error)
})

使用异步组件和 Suspense（Vue 3）

Vue 3 的 Suspense 组件可以优雅地处理异步加载：

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

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

每种方法适用于不同场景，可以根据项目需求选择合适的实现方式。简单的项目可以使用 v-if 或 CSS 动画，复杂项目推荐使用状态管理或拦截器方案。