当前位置：首页 > VUE

vue 怎么实现loading

2026-02-18 09:56:21VUE

实现全局 Loading 的方法

在 Vue 中实现全局 Loading 效果，可以通过以下几种方式：

使用 Vuex 管理状态

通过 Vuex 存储全局 Loading 状态，在需要时切换显示/隐藏。

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

<!-- App.vue -->
<template>
  <div>
    <div v-if="$store.state.isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    <router-view />
  </div>
</template>

使用拦截器（Axios）

在 Axios 请求拦截器中自动控制 Loading 状态。

vue 怎么实现loading

// http.js
import axios from 'axios'
import store from './store'

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)
  }
)

使用插件封装

封装一个全局 Loading 插件，通过 Vue.prototype 或 provide/inject 方式调用。

// loading-plugin.js
export default {
  install(Vue) {
    Vue.prototype.$loading = {
      show() {
        // 显示 Loading
      },
      hide() {
        // 隐藏 Loading
      }
    }
  }
}

局部 Loading 的实现

在单个组件中实现 Loading 效果，可以结合 v-if 或动态类名控制。

vue 怎么实现loading

<template>
  <div>
    <button @click="fetchData" :disabled="isLoading">
      {{ isLoading ? 'Loading...' : 'Load Data' }}
    </button>
    <div v-if="isLoading" class="loading-indicator">
      Loading...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    async fetchData() {
      this.isLoading = true
      try {
        await axios.get('/api/data')
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

使用第三方库

常见的第三方库（如 Element UI、Ant Design Vue）提供现成的 Loading 组件。

<template>
  <div>
    <el-button @click="showLoading">Show Loading</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    showLoading() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => loading.close(), 2000)
    }
  }
}
</script>

CSS 动画优化

为 Loading 添加平滑动画提升用户体验。

.loading-spinner {
  animation: spin 1s linear infinite;
}

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

通过以上方法，可以灵活实现全局或局部 Loading 效果，结合项目需求选择合适方案。