写一个vue请求加载动画代码
时间: 2024-04-29 20:23:45 浏览: 11
以下是一个基本的Vue请求加载动画代码:
```vue
<template>
<div>
<div v-if="loading" class="loading">
<div class="spinner"></div>
</div>
<div v-else>
<!-- 这里是你的内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
};
},
methods: {
// 发送请求前调用
showLoading() {
this.loading = true;
},
// 请求完成后调用
hideLoading() {
this.loading = false;
},
// 发送请求
fetchData() {
this.showLoading();
// 发送请求代码
axios.get('/api/data').then((response) => {
// 处理响应数据
console.log(response.data);
this.hideLoading();
});
},
},
};
</script>
<style>
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px solid #fff;
border-top-color: #007bff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
```
在上面的代码中,我们首先使用一个`loading`布尔值来控制加载动画的显示和隐藏,然后在发送请求前调用`showLoading`方法来显示加载动画,在请求完成后调用`hideLoading`方法来隐藏加载动画。
我们还定义了一个`fetchData`方法来发送请求,你可以将这个方法与你的具体请求代码结合起来使用。
最后,我们使用CSS来定义了一个简单的加载动画,用来在`loading`为`true`时显示。