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