102 lines
3.2 KiB
Vue
102 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
||
import { Loading, Page, Spinner } from '@vben/common-ui';
|
||
import { IconifyIcon } from '@vben/icons';
|
||
|
||
import { refAutoReset } from '@vueuse/core';
|
||
import { Button, Card, Spin } from 'ant-design-vue';
|
||
|
||
const spinning = refAutoReset(false, 3000);
|
||
const loading = refAutoReset(false, 3000);
|
||
|
||
const spinningV = refAutoReset(false, 3000);
|
||
const loadingV = refAutoReset(false, 3000);
|
||
</script>
|
||
<template>
|
||
<Page
|
||
title="Vben Loading"
|
||
description="加载中状态组件。这个组件可以为其它作为容器的组件添加一个加载中的遮罩层。使用它们时，容器需要relative定位。"
|
||
>
|
||
<Card title="Antd Spin">
|
||
<template #actions>这是Antd 组件库自带的Spin组件演示</template>
|
||
<Spin :spinning="spinning" tip="加载中...">
|
||
<Button type="primary" @click="spinning = true">显示Spin</Button>
|
||
</Spin>
|
||
</Card>
|
||
|
||
<Card title="Vben Loading" v-loading="loadingV" class="mt-4">
|
||
<template #extra>
|
||
<Button type="primary" @click="loadingV = true">
|
||
v-loading 指令
|
||
</Button>
|
||
</template>
|
||
<template #actions>
|
||
Loading组件可以设置文字，并且也提供了icon插槽用于替换加载图标。
|
||
</template>
|
||
<div class="flex gap-4">
|
||
<div class="size-40">
|
||
<Loading
|
||
:spinning="loading"
|
||
text="正在加载..."
|
||
class="flex h-full w-full items-center justify-center"
|
||
>
|
||
<Button type="primary" @click="loading = true">默认动画</Button>
|
||
</Loading>
|
||
</div>
|
||
<div class="size-40">
|
||
<Loading
|
||
:spinning="loading"
|
||
class="flex h-full w-full items-center justify-center"
|
||
>
|
||
<Button type="primary" @click="loading = true">自定义动画1</Button>
|
||
<template #icon>
|
||
<IconifyIcon
|
||
icon="svg-spinners:ring-resize"
|
||
class="text-primary size-10"
|
||
/>
|
||
</template>
|
||
</Loading>
|
||
</div>
|
||
<div class="size-40">
|
||
<Loading
|
||
:spinning="loading"
|
||
class="flex h-full w-full items-center justify-center"
|
||
>
|
||
<Button type="primary" @click="loading = true">自定义动画2</Button>
|
||
<template #icon>
|
||
<IconifyIcon
|
||
icon="svg-spinners:bars-scale"
|
||
class="text-primary size-10"
|
||
/>
|
||
</template>
|
||
</Loading>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<Card
|
||
title="Vben Spinner"
|
||
v-spinning="spinningV"
|
||
class="mt-4 overflow-hidden"
|
||
:body-style="{
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
}"
|
||
>
|
||
<template #extra>
|
||
<Button type="primary" @click="spinningV = true">
|
||
v-spinning 指令
|
||
</Button>
|
||
</template>
|
||
<template #actions>
|
||
Spinner组件是Loading组件的一个特例，只有一个固定的统一样式。
|
||
</template>
|
||
<Spinner
|
||
:spinning="spinning"
|
||
class="flex size-40 items-center justify-center"
|
||
>
|
||
<Button type="primary" @click="spinning = true">显示Spinner</Button>
|
||
</Spinner>
|
||
</Card>
|
||
</Page>
|
||
</template>
|