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

8
src/views/ViewComponents.vue
View File

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