49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<!-- MoneyInput.vue -->
|
|
<template>
|
|
<v-text-field
|
|
:value="formattedValue"
|
|
@input="handleInput"
|
|
@blur="handleBlur"
|
|
v-bind="$attrs"
|
|
v-on="$listeners"
|
|
></v-text-field>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: [String, Number],
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
formattedValue() {
|
|
if (!this.value) return '';
|
|
|
|
const parts = this.value.toString().split('.');
|
|
const integerPart = parts[0];
|
|
const decimalPart = parts.length > 1 ? parts[1] : '';
|
|
|
|
const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
|
|
|
return decimalPart ? `${formattedInteger},${decimalPart}` : formattedInteger;
|
|
}
|
|
},
|
|
methods: {
|
|
handleInput(value) {
|
|
if (!value) {
|
|
this.$emit('input', '');
|
|
return;
|
|
}
|
|
|
|
let processedValue = value.replace(/\./g, '').replace(',', '.');
|
|
this.$emit('input', processedValue);
|
|
},
|
|
|
|
handleBlur() {
|
|
// Format ulang jika perlu
|
|
}
|
|
}
|
|
}
|
|
</script> |