83 lines
2.6 KiB
Vue
83 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<v-text-field
|
|
ref="textField"
|
|
:value="currencyValue"
|
|
@input="updateValue"
|
|
v-currency="{
|
|
currency: currencyName,
|
|
locale: languageName
|
|
}"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
:label="label"
|
|
:rules="rules"
|
|
:error-messages="errorMessages"
|
|
:append-outer-icon="appendOuterIcon"
|
|
@click:append-outer="$emit('gz-append-outer')"
|
|
></v-text-field>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* Xeslint-disable //@click:append-outer="appendOuter"*/
|
|
//https://dm4t2.github.io/vue-currency-input/guide/#introduction :value="formattedValue"
|
|
//https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
|
|
//https://github.com/dm4t2/vue-currency-input
|
|
//https://github.com/dm4t2/vue-currency-input/releases
|
|
import { setValue, parseCurrency } from "vue-currency-input";
|
|
export default {
|
|
data() {
|
|
return {
|
|
currencyName: window.$gz.locale.getCurrencyName(),
|
|
languageName: window.$gz.locale.getResolvedLanguage(),
|
|
initializing: true
|
|
};
|
|
},
|
|
props: {
|
|
label: { type: String, default: null },
|
|
rules: { type: Array, default: undefined },
|
|
value: { type: Number, default: null },
|
|
readonly: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false },
|
|
errorMessages: { type: Array, default: null },
|
|
appendOuterIcon: { type: String, default: null }
|
|
},
|
|
computed: {
|
|
currencyValue() {
|
|
return this.value;
|
|
}
|
|
},
|
|
methods: {
|
|
updateValue() {
|
|
//this is required because the initial setting triggers an input event
|
|
//however the two values differ because it comes from the server in much higher precision
|
|
//and this control rounds it down
|
|
//so the first trigger must be ignored until it "settles"
|
|
if (this.initializing) {
|
|
this.initializing = false;
|
|
return;
|
|
}
|
|
let val = this.$refs.textField.$refs.input.value;
|
|
// //_value contains the actual underlying numeric value without text
|
|
// //value contains the entered text
|
|
// if (this.$refs.textField.$refs.input._value == this.value) {
|
|
// return;
|
|
// }
|
|
let parsedValue = parseCurrency(val, {
|
|
currency: this.currencyName,
|
|
locale: this.languageName
|
|
});
|
|
|
|
// //this.value on init is a very long string of digits / decimal places triggering a variance once rounded
|
|
// let parsedOldValue = parseCurrency(this.value.toString(), {
|
|
// currency: this.currencyName,
|
|
// locale: this.languageName
|
|
// });
|
|
if (parsedValue != this.value) {
|
|
this.$emit("input", parsedValue);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|