ant design vue2 给div 标签设置加载
时间: 2023-08-03 13:06:57 浏览: 175
你可以使用 ant-design-vue2 中的 Spin 组件来为 div 标签设置加载动画。首先,你需要在组件中引入 Spin 组件,例如:
```vue
<template>
<div class="loading-wrapper">
<a-spin size="large" tip="Loading..."></a-spin>
<div class="content">
<!-- 这里放置你的内容 -->
</div>
</div>
</template>
<script>
import { Spin } from 'ant-design-vue';
export default {
components: {
Spin
}
};
</script>
<style>
.loading-wrapper {
position: relative;
height: 100%;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
```
在上面的示例中,我们将 Spin 组件放在 div 标签的外层,使用 position: relative; 让 Spin 组件与 div 标签处于同一层级,并使用 position: absolute;、top: 50%; 和 left: 50%; 让 div 标签相对于其父元素居中显示。你也可以根据需要自行修改样式。
阅读全文