fix: loading and spinner style fixed and improved (#5588)

This commit is contained in:
Netfan 2025-02-23 15:30:17 +08:00 committed by GitHub
parent 579b1b486c
commit d49e3e81a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 12 deletions

View File

@ -88,7 +88,7 @@ function onTransitionEnd() {
</span> </span>
</slot> </slot>
<div v-if="text" class="mt-4 text-xs">{{ text }}</div> <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

View File

@ -1,16 +1,36 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VbenLoading } from '@vben-core/shadcn-ui'; import { VbenLoading } from '@vben-core/shadcn-ui';
import { cn } from '@vben-core/shared/utils';
interface LoadingProps {
class?: string;
/**
* @zh_CN 最小加载时间
* @en_US Minimum loading time
*/
minLoadingTime?: number;
/**
* @zh_CN loading状态开启
*/
spinning?: boolean;
/**
* @zh_CN 文字
*/
text?: string;
}
defineOptions({ name: 'Loading' }); defineOptions({ name: 'Loading' });
defineProps<{ const props = defineProps<LoadingProps>();
spinning: boolean;
text?: string;
}>();
</script> </script>
<template> <template>
<div class="relative min-h-20"> <div :class="cn('relative min-h-20', props.class)">
<slot></slot> <slot></slot>
<VbenLoading :spinning="spinning" :text="text"> <VbenLoading
:min-loading-time="props.minLoadingTime"
:spinning="props.spinning"
:text="props.text"
>
<template v-if="$slots.icon" #icon> <template v-if="$slots.icon" #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
</template> </template>

View File

@ -1,14 +1,28 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VbenSpinner } from '@vben-core/shadcn-ui'; import { VbenSpinner } from '@vben-core/shadcn-ui';
import { cn } from '@vben-core/shared/utils';
interface SpinnerProps {
class?: string;
/**
* @zh_CN 最小加载时间
* @en_US Minimum loading time
*/
minLoadingTime?: number;
/**
* @zh_CN loading状态开启
*/
spinning?: boolean;
}
defineOptions({ name: 'Spinner' }); defineOptions({ name: 'Spinner' });
defineProps({ const props = defineProps<SpinnerProps>();
spinning: Boolean,
});
</script> </script>
<template> <template>
<div class="relative min-h-20"> <div :class="cn('relative min-h-20', props.class)">
<slot></slot> <slot></slot>
<VbenSpinner :spinning="spinning" /> <VbenSpinner
:min-loading-time="props.minLoadingTime"
:spinning="props.spinning"
/>
</div> </div>
</template> </template>