perf: add loading property to icon button
This commit is contained in:
parent
25cdfa2685
commit
444f643d4a
|
@ -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
|
||||||
|
:disabled="disabled"
|
||||||
|
:focusable="false"
|
||||||
|
:loading="loading"
|
||||||
|
:text="!border"
|
||||||
|
@click.prevent="emit('click')">
|
||||||
|
<template #icon>
|
||||||
<n-icon :color="props.color" :size="props.size">
|
<n-icon :color="props.color" :size="props.size">
|
||||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||||
</n-icon>
|
</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
|
||||||
|
v-else
|
||||||
|
:disabled="disabled"
|
||||||
|
:focusable="false"
|
||||||
|
:loading="loading"
|
||||||
|
:text="!border"
|
||||||
|
@click.prevent="emit('click')">
|
||||||
|
<template #icon>
|
||||||
<n-icon :color="props.color" :size="props.size">
|
<n-icon :color="props.color" :size="props.size">
|
||||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
|
</template>
|
||||||
</n-button>
|
</n-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue