vue3项目 setup 增加一个loadding动画 代码怎么写 当接口正在返回开启动画 状态是true 当接口返回200 动画消失 状态是false 调用element-ui组件库的东西 代码怎么写
时间: 2024-04-12 07:27:39 浏览: 27
在Vue 3项目中,你可以通过以下方式来添加一个loading动画并根据接口返回状态来控制它的显示和隐藏:
首先,在你的组件中,声明一个data属性来表示loading的状态:
```javascript
data() {
return {
loading: false
}
}
```
然后,在你的模板中,使用element-ui的loading组件并将loading状态绑定到它的v-model上:
```html
<template>
<div>
<el-button @click="fetchData">请求数据</el-button>
<el-loading v-model="loading">
<!-- 这里放置你的加载内容 -->
<div class="loading-content">
数据加载中...
</div>
</el-loading>
</div>
</template>
```
接下来,在你的methods中,编写发送请求的逻辑,并在接口请求前后修改loading状态:
```javascript
methods: {
fetchData() {
this.loading = true; // 开启loading动画
// 发送接口请求
axios.get('your-api-url')
.then(response => {
// 处理接口返回数据
// ...
})
.catch(error => {
// 处理错误
// ...
})
.finally(() => {
this.loading = false; // 关闭loading动画
});
}
}
```
这样,当你点击"请求数据"按钮时,loading动画会显示出来,当接口返回成功或失败时,loading动画会消失。
以上代码使用了axios来发送请求,你需要在项目中安装并导入axios库。同时,你需要按照element-ui的文档正确引入和使用el-loading组件。
请注意,以上代码只是一个示例,你需要根据你的实际项目需求进行相应的修改。