github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

perf: improve button loading styles 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-21 17:44:25 +08:00
parent 57433d9630
commit 36b77fc563
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/base/button/Button.vue
View File

@ -5,14 +5,10 @@
class="btn" class="btn"
@click="handleClick" @click="handleClick"
> >
<span <span v-if="$slots.icon || loading" class="btn-icon">
v-if="$slots.icon || loading"
:class="{ 'mr-3': !!$slots.default }"
class="btn-icon"
>
<svg <svg
v-if="loading" v-if="loading"
class="animate-spin h-5 w-5 text-white" class="animate-spin"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -124,6 +120,9 @@ function handleClick() {
.btn-default { .btn-default {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
.btn-icon {
color: #0e1731;
}
} }
.btn-primary { .btn-primary {
@ -145,6 +144,12 @@ function handleClick() {
@apply w-full; @apply w-full;
} }
.btn-icon {
@apply h-5 w-5;
@apply text-white;
@apply mr-3;
}
.btn-loading { .btn-loading {
@apply cursor-not-allowed; @apply cursor-not-allowed;
&:hover { &:hover {
@ -162,12 +167,22 @@ function handleClick() {
@apply h-7; @apply h-7;
@apply px-3; @apply px-3;
@apply text-xs; @apply text-xs;
.btn-icon {
@apply h-3 w-3;
@apply mr-2;
}
} }
.btn-xs { .btn-xs {
@apply h-6; @apply h-6;
@apply px-2; @apply px-2;
@apply text-xs; @apply text-xs;
.btn-icon {
@apply h-3 w-3;
@apply mr-2;
}
} }
.btn-circle { .btn-circle {

8
src/views/ViewComponents.vue
View File

@ -77,25 +77,25 @@
<VSpace> <VSpace>
<VButton size="lg" type="secondary"> <VButton size="lg" type="secondary">
<template #icon> <template #icon>
<IconSettings /> <IconSettings class="w-full h-full" />
</template> </template>
Large Large
</VButton> </VButton>
<VButton type="secondary"> <VButton type="secondary">
<template #icon> <template #icon>
<IconSettings /> <IconSettings class="w-full h-full" />
</template> </template>
Default Default
</VButton> </VButton>
<VButton size="sm" type="secondary"> <VButton size="sm" type="secondary">
<template #icon> <template #icon>
<IconSettings /> <IconSettings class="w-full h-full" />
</template> </template>
sm sm
</VButton> </VButton>
<VButton size="xs" type="secondary"> <VButton size="xs" type="secondary">
<template #icon> <template #icon>
<IconSettings /> <IconSettings class="w-full h-full" />
</template> </template>
xs xs
</VButton> </VButton>