perf: force change icon button color when then state is loading
This commit is contained in:
parent
6fb0eadfbd
commit
faad24d1d5
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'currentColor',
|
||||
default: '',
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
|
@ -38,9 +38,10 @@ const hasTooltip = computed(() => {
|
|||
:focusable="false"
|
||||
:loading="loading"
|
||||
:text="!border"
|
||||
:color="props.color"
|
||||
@click.prevent="emit('click')">
|
||||
<template #icon>
|
||||
<n-icon :color="props.color" :size="props.size">
|
||||
<n-icon :color="props.color || 'currentColor'" :size="props.size">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
</template>
|
||||
|
@ -54,9 +55,10 @@ const hasTooltip = computed(() => {
|
|||
:focusable="false"
|
||||
:loading="loading"
|
||||
:text="!border"
|
||||
:color="props.color"
|
||||
@click.prevent="emit('click')">
|
||||
<template #icon>
|
||||
<n-icon :color="props.color" :size="props.size">
|
||||
<n-icon :color="props.color || 'currentColor'" :size="props.size">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
</template>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { ConnectionType } from '@/consts/connection_type.js'
|
||||
import { NIcon, NSpace, NTag } from 'naive-ui'
|
||||
import { NIcon, NSpace, NTag, useThemeVars } from 'naive-ui'
|
||||
import Key from '@/components/icons/Key.vue'
|
||||
import Binary from '@/components/icons/Binary.vue'
|
||||
import Database from '@/components/icons/Database.vue'
|
||||
|
@ -31,6 +31,7 @@ const props = defineProps({
|
|||
keyView: String,
|
||||
})
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const i18n = useI18n()
|
||||
const loading = ref(false)
|
||||
const loadingConnections = ref(false)
|
||||
|
@ -532,6 +533,7 @@ const getDatabaseMenu = (opened, loading, end) => {
|
|||
icon: LoadList,
|
||||
disabled: end === true,
|
||||
loading: loading === true,
|
||||
color: loading === true ? themeVars.value.primaryColor : '',
|
||||
onClick: () => handleSelectContextMenu('db_loadmore'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
|
@ -539,6 +541,7 @@ const getDatabaseMenu = (opened, loading, end) => {
|
|||
icon: LoadAll,
|
||||
disabled: end === true,
|
||||
loading: loading === true,
|
||||
color: loading === true ? themeVars.value.primaryColor : '',
|
||||
onClick: () => handleSelectContextMenu('db_loadall'),
|
||||
}),
|
||||
h(IconButton, {
|
||||
|
|
Loading…
Reference in New Issue