refactor(frontend): refactor MkNumberDiff.vue
This commit is contained in:
parent
eb0e2ceef7
commit
e461fb169e
|
@ -1,47 +1,32 @@
|
|||
<template>
|
||||
<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
|
||||
<span class="ceaaebcd" :class="{ [$style.isPlus]: isPlus, [$style.isMinus]: isMinus, [$style.isZero]: isZero }">
|
||||
<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import number from '@/filters/number';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
const props = defineProps<{
|
||||
value: number;
|
||||
}>();
|
||||
|
||||
setup(props) {
|
||||
const isPlus = computed(() => props.value > 0);
|
||||
const isMinus = computed(() => props.value < 0);
|
||||
const isZero = computed(() => props.value === 0);
|
||||
return {
|
||||
isPlus,
|
||||
isMinus,
|
||||
isZero,
|
||||
number,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ceaaebcd {
|
||||
&.isPlus {
|
||||
<style lang="scss" module>
|
||||
.isPlus {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
&.isMinus {
|
||||
.isMinus {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
&.isZero {
|
||||
.isZero {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue