vue实现加载

Vue 实现加载功能的方法

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

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

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

<template>
  <div>
    <div v-if="isLoading" class="loading-spinner">Loading...</div>
    <div v-else>Content loaded</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    fetchData() {
      this.isLoading = true
      // 模拟异步请求
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    }
  }
}
</script>

使用第三方库如vue-loading-overlay

vue-loading-overlay是一个专门用于Vue的加载指示器组件，提供多种加载动画效果。

安装：

npm install vue-loading-overlay

使用：

<template>
  <div>
    <button @click="showLoader">Load Data</button>
    <loading :active.sync="isLoading" :can-cancel="true"></loading>
  </div>
</template>

<script>
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

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

使用axios拦截器实现全局加载

对于使用axios的项目，可以通过拦截器实现全局加载状态管理。

import axios from 'axios'
import Vue from 'vue'

const http = axios.create({
  baseURL: 'https://api.example.com'
})

// 请求拦截器
http.interceptors.request.use(config => {
  Vue.prototype.$loading.show()
  return config
})

// 响应拦截器
http.interceptors.response.use(
  response => {
    Vue.prototype.$loading.hide()
    return response
  },
  error => {
    Vue.prototype.$loading.hide()
    return Promise.reject(error)
  }
)

export default http

使用Vuex管理全局加载状态

对于大型应用，可以使用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">Loading...</div>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$store.commit('setLoading', true)
      // 异步请求
      setTimeout(() => {
        this.$store.commit('setLoading', false)
      }, 2000)
    }
  }
}
</script>

使用CSS动画实现加载效果

可以自定义CSS动画来创建加载指示器。

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

<style>
.spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
</style>

以上方法可以根据项目需求选择使用，简单的项目可以使用v-if或自定义CSS，复杂项目建议使用第三方库或结合Vuex管理状态。