lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: add loading property to icon button

This commit is contained in:
tiny-craft 2023-10-20 18:22:22 +08:00
parent 25cdfa2685
commit 444f643d4a
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/common/IconButton.vue
View File

@ -20,6 +20,7 @@ const props = defineProps({
type: [Number, String],
default: 3,
},
loading: Boolean,
border: Boolean,
disabled: Boolean,
})
@ -30,20 +31,35 @@ const hasTooltip = computed(() => {
</script>
<template>
<n-tooltip v-if="hasTooltip">
<n-tooltip v-if="hasTooltip" :show-arrow="false">
<template #trigger>
<n-button :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
<n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
<n-button
:disabled="disabled"
:focusable="false"
:loading="loading"
:text="!border"
@click.prevent="emit('click')">
<template #icon>
<n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
</template>
</n-button>
</template>
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
</n-tooltip>
<n-button v-else :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
<n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
<n-button
v-else
:disabled="disabled"
:focusable="false"
:loading="loading"
:text="!border"
@click.prevent="emit('click')">
<template #icon>
<n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon>
</template>
</n-button>
</template>