Добавлено форматирование дробного числа
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AppPanel from "../../../Components/AppPanel.vue";
|
import AppPanel from "../../../Components/AppPanel.vue";
|
||||||
import {NNumberAnimation, NStatistic} from "naive-ui";
|
import {NNumberAnimation, NStatistic, enUS} from "naive-ui";
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
counter: {
|
counter: {
|
||||||
@@ -20,6 +21,17 @@ const props = defineProps({
|
|||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const counterPrecision = computed(() => {
|
||||||
|
if (Number.isNaN(props.counter)) return 0
|
||||||
|
if (props.counter % 1 !== 0) return 2
|
||||||
|
return 0
|
||||||
|
})
|
||||||
|
const counterSuffixPrecision = computed(() => {
|
||||||
|
if (Number.isNaN(props.counterSuffix)) return 0
|
||||||
|
if (props.counterSuffix % 1 !== 0) return 2
|
||||||
|
return 0
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -31,13 +43,13 @@ const props = defineProps({
|
|||||||
<slot />
|
<slot />
|
||||||
</template>
|
</template>
|
||||||
<template v-if="isDoubleCounter">
|
<template v-if="isDoubleCounter">
|
||||||
<NNumberAnimation :from="0" :to="counter" />
|
<NNumberAnimation :from="0" :to="counter" :precision="counterPrecision" :locale="enUS" />
|
||||||
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
||||||
<span style="color: var(--n-close-icon-color)"> / </span>
|
<span style="color: var(--n-close-icon-color)"> / </span>
|
||||||
<NNumberAnimation :from="0" :to="counterSuffix" />
|
<NNumberAnimation :from="0" :to="counterSuffix" :precision="counterSuffixPrecision" :locale="enUS" />
|
||||||
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
||||||
</template>
|
</template>
|
||||||
<NNumberAnimation v-else :from="0" :to="counter" />
|
<NNumberAnimation v-else :from="0" :to="counter" :precision="counterPrecision" :locale="enUS" />
|
||||||
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
||||||
</NStatistic>
|
</NStatistic>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user