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

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

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

引入并配置：在主入口文件（如 main.js）中，导入并注册该库，通常会有一个全局钩子函数来控制是否显示加载动画：
import VueLoadingOverlay from 'vue-loading-overlay'
Vue.use(VueLoadingOverlay, {
// 设置默认选项，比如颜色、位置等
spinner: 'circular', // 可选值有多种，如'circular', 'rectangular', 'double-bounce', 等
color: '#000',
position: 'center',
})
登录后复制

在需要的地方显示加载：在组件内，当数据请求开始时，可以显示加载动画，一般通过调用 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);
});
},
}
登录后复制

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