在 Web 开发中，“
loading” 是指在数据加载或操作完成之前向用户展示的提示状态。它通常用于异步操作（如 API 请求、页面加载、表单提交等），以提升用户体验。
---
## ✅ 常见场景
| 场景 | 描述 |
|------|------|
| 页面加载 | 在页面内容加载完成前显示
loading 动画 |
| 表单提交 | 提交表单时显示
loading，防止重复提交 |
| API 请求 | 在请求接口时显示
loading，等待响应 |
| 按钮点击 | 点击按钮后等待结果时显示
loading 状态 |
---
## ✅ Vue 2 中实现
loading 的方式
以下是一个使用 Vue 2 实现的简单
loading 状态示例：
### 1. 使用 `data` 控制
loading 状态
```vue
<template>
<div>
<button @click="loadData" :disabled="
loading">
{{
loading ? '
Loading...' : 'Load Data' }}
</button>
<div v-if="
loading" class="
loading-indicator">
<span>
Loading...</span>
</div>
<div v-if="data">
{{ data }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
data: null
};
},
methods: {
async loadData() {
this.
loading = true;
try {
const response = await fetch('https://api.example.com/data');
this.data = await response.json();
} catch (error) {
console.error('Error fetching data:', error);
} finally {
this.
loading = false;
}
}
}
};
</script>
<style scoped>
.
loading-indicator {
margin-top: 10px;
font-style: italic;
color: #555;
}
</style>
```
---
## ✅ 使用
loading 动画组件（可复用）
你可以封装一个可复用的
loading 组件：
```vue
<!-- components/
Loading.vue -->
<template>
<div v-if="show" class="
loading-spinner">
<div class="spinner"></div>
<span v-if="text">{{ text }}</span>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
required: true
},
text: {
type: String,
default: '
Loading...'
}
}
};
</script>
<style scoped>
.
loading-spinner {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
color: #666;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
margin-right: 10px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
```
### 使用示例：
```vue
<template>
<div>
<button @click="loadData" :disabled="
loading">Load Data</button>
<
Loading :show="
loading" text="Fetching data..." />
<div v-if="data">{{ data }}</div>
</div>
</template>
<script>
import
Loading from './components/
Loading.vue';
export default {
components: {
Loading
},
data() {
return {
loading: false,
data: null
};
},
methods: {
async loadData() {
this.
loading = true;
try {
const response = await fetch('https://api.example.com/data');
this.data = await response.json();
} catch (error) {
console.error('Error fetching data:', error);
} finally {
this.
loading = false;
}
}
}
};
</script>
```
---
## ✅ 在 Axios 中统一处理
loading（可选）
你可以使用 Axios 的拦截器统一处理
loading 状态：
```javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = new Vue({
el: '#app',
render: h => h(App)
});
let
loadingCount = 0;
axios.interceptors.request.use(config => {
loadingCount++;
app.$emit('
loading-start');
return config;
});
axios.interceptors.response.use(response => {
loadingCount--;
if (
loadingCount === 0) {
app.$emit('
loading-stop');
}
return response;
}, error => {
loadingCount--;
if (
loadingCount === 0) {
app.$emit('
loading-stop');
}
return Promise.reject(error);
});
```
然后在你的组件中监听事件：
```vue
<template>
<div>
<
Loading :show="
loading" />
<!-- 其他内容 -->
</div>
</template>
<script>
export default {
data() {
return {
loading: false
};
},
created() {
this.$on('
loading-start', () => {
this.
loading = true;
});
this.$on('
loading-stop', () => {
this.
loading = false;
});
}
};
</script>
```
---
## ✅ 总结
| 方法 | 说明 |
|------|------|
| 基础状态控制 | 使用 `data` 中的 `
loading` 控制显示 |
| 可复用组件 | 封装一个 `
Loading.vue` 组件，便于全局使用 |
| Axios 拦截器 | 统一管理
loading 状态，避免重复代码 |
| 动画效果 | 使用 CSS 动画实现
loading spinner |
---
###
扫一扫
3876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
