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