index.vue
2.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
<text class="zui-amount" :class="classBind">
<template v-if="!isCapital">{{ Number(value || 0) | doPrecision(legalPrecision, isRoundUp) | doFormat(hasSeparator, separator) }}</template>
<template v-else>{{ Number(value || 0) | doPrecision(4, isRoundUp) | doCapital }}</template>
</text>
</template>
<script>
import { formatValueByGapStep } from '@/utils/format-value.js';
import numberCapital from '@/utils/number-capital.js';
export default {
name: 'zui-amount',
props: {
value: {
type: [Number, String],
default: 0
},
precision: {
type: Number,
default: 2
},
isRoundUp: {
type: Boolean,
default: true
},
hasSeparator: {
type: Boolean,
default: false
},
separator: {
type: String,
default: ','
},
isCapital: {
type: Boolean,
default: false
},
},
computed: {
classBind: function() {
const normalClass = !this.isCapital ? 'numerical' : '';
if (this.$options && this.$options.propsData && this.$options.propsData.className) {
return normalClass + ' ' + this.$options.propsData.className;
}
return normalClass;
},
legalPrecision: function() {
return this.precision > 0 ? this.precision : 0
},
},
filters: {
doPrecision: function(value, precision, isRoundUp) {
const exponentialForm = Number(`${value}e${precision}`)
const rounded = isRoundUp ? Math.round(exponentialForm) : Math.floor(exponentialForm)
return Number(`${rounded}e-${precision}`).toFixed(precision)
},
doFormat: function(value, hasSeparator, separator) {
if (!hasSeparator) {
return value
}
const numberParts = value.split('.')
let integerValue = numberParts[0]
const decimalValue = numberParts[1] || ''
let sign = ''
if (integerValue.startsWith('-')) {
integerValue = integerValue.substring(1)
sign = '-'
}
const formateValue = formatValueByGapStep(3, integerValue, separator, 'right', 0, 1)
return decimalValue ? `${sign}${formateValue.value}.${decimalValue}` : `${sign}${formateValue.value}`
},
doCapital: function(value) {
return numberCapital(value)
},
},
};
</script>
<style lang="scss">
@import './index.scss';
</style>