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>
</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>
</div>
</template>

View File

@ -1,16 +1,36 @@
<script lang="ts" setup>
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' });
defineProps<{
spinning: boolean;
text?: string;
}>();
const props = defineProps<LoadingProps>();
</script>
<template>
<div class="relative min-h-20">
<div :class="cn('relative min-h-20', props.class)">
<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>
<slot name="icon"></slot>
</template>

View File

@ -1,14 +1,28 @@
<script lang="ts" setup>
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' });
defineProps({
spinning: Boolean,
});
const props = defineProps<SpinnerProps>();
</script>
<template>
<div class="relative min-h-20">
<div :class="cn('relative min-h-20', props.class)">
<slot></slot>
<VbenSpinner :spinning="spinning" />
<VbenSpinner
:min-loading-time="props.minLoadingTime"
:spinning="props.spinning"
/>
</div>
</template>