vue2中的加载动画调用与关闭

在 Vue.js 中，特别是 Vue 2.x 版本，设置加载动画通常是通过使用第三方库如 `vue-loading-overlay` 或者自定义组件来实现的。以下是基本步骤：

1. **安装库**：首先，你需要在项目中安装一个用于动态显示加载动画的库。例如，你可以通过运行 `npm install vue-loading-overlay` 来安装 `vue-loading-overlay`。

2. **引入并配置**：在主入口文件（如 `main.js`）中，导入并注册该库，通常会有一个全局钩子函数来控制是否显示加载动画：

import VueLoadingOverlay from 'vue-loading-overlay'
Vue.use(VueLoadingOverlay, {
  // 设置默认选项，比如颜色、位置等
  spinner: 'circular', // 可选值有多种，如'circular', 'rectangular', 'double-bounce', 等
  color: '#000',
  position: 'center',
})

3. **在需要的地方显示加载**：在组件内，当数据请求开始时，可以显示加载动画，一般通过调用 `this.$loading.show()`。示例：

data() {
  return {
    loading: false,
  }
},
methods: {
  fetchData() {
    this.loading = true;
    axios.get('/api/data')
      .then(response => {
        this.loading = false; // 请求成功后隐藏加载动画
        // ...处理数据
      })
      .catch(error => {
        this.loading = false; // 请求失败后隐藏加载动画
        console.error('Error fetching data:', error);
      });
  },
}

4. **关闭加载动画**：当数据请求结束时，无论成功还是失败，都需要调用 `this.$loading.hide()` 来关闭加载动画。