github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 08:36:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: loading and spinner component with directive (#5587)

Browse Source 
* 添加loading和spinner组件，以及对应的vue指令
This commit is contained in:
Netfan
2025-02-23 12:41:54 +08:00
committed by GitHub
parent eba372062e
commit 579b1b486c
13 changed files with 321 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
View File

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
});
// const startTime = ref(0);
const showSpinner = ref(false);
const renderSpinner = ref(true);
const renderSpinner = ref(false);
const timer = ref<ReturnType<typeof setTimeout>>();
watch(
@@ -69,7 +69,7 @@ function onTransitionEnd() {
<div
:class="
cn(
'z-100 dark:bg-overlay bg-overlay-content pointer-events-none absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
'z-100 dark:bg-overlay bg-overlay-content absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
{
'invisible opacity-0': !showSpinner,
},
@@ -78,15 +78,18 @@ function onTransitionEnd() {
"
@transitionend="onTransitionEnd"
>
<span class="dot relative inline-block size-9 text-3xl">
<i
v-for="index in 4"
:key="index"
class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
></i>
</span>
<slot name="icon" v-if="renderSpinner">
<span class="dot relative inline-block size-9 text-3xl">
<i
v-for="index in 4"
:key="index"
class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
></i>
</span>
</slot>
<div v-if="text" class="mt-4 text-xs">{{ text }}</div>
<slot></slot>
</div>
</template>

3
packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
View File

@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
});
// const startTime = ref(0);
const showSpinner = ref(false);
const renderSpinner = ref(true);
const renderSpinner = ref(false);
const timer = ref<ReturnType<typeof setTimeout>>();
watch(
@@ -74,6 +74,7 @@ function onTransitionEnd() {
>
<div
:class="{ paused: !renderSpinner }"
v-if="renderSpinner"
class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
></div>
</div>