在vben框架中页面loading在数据加载完毕结束loading
时间: 2024-05-03 22:18:31 浏览: 10
在 vben 框架中,可以通过 `useLoading` 钩子来控制页面的 loading 状态。使用该钩子需要先安装 `@vueuse/core` 包。
具体实现方式如下:
1. 在组件中引入 `useLoading` 钩子:
```javascript
import { useLoading } from '@vueuse/core'
```
2. 在组件中定义 `isLoading` 状态和 `setLoading` 方法:
```javascript
export default {
setup() {
const { isLoading, setLoading } = useLoading()
// ...
return {
isLoading,
setLoading,
// ...
}
},
}
```
3. 在数据加载前调用 `setLoading(true)`,在数据加载完成后调用 `setLoading(false)`:
```javascript
export default {
setup() {
const { isLoading, setLoading } = useLoading()
const fetchData = async () => {
setLoading(true)
// 数据加载逻辑
setLoading(false)
}
// ...
return {
isLoading,
setLoading,
fetchData,
// ...
}
},
}
```
4. 在模板中根据 `isLoading` 状态来显示 loading:
```html
<template>
<div>
<!-- 页面内容 -->
<div v-if="isLoading">loading...</div>
</div>
</template>
```
这样就可以在数据加载完成后结束 loading 状态了。