59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<v-text-field
|
|
ref="textField"
|
|
:value="currencyValue"
|
|
@change="updateValue"
|
|
v-currency="{
|
|
currency: currencyName,
|
|
locale: languageName
|
|
}"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
:label="label"
|
|
:rules="rules"
|
|
:error-messages="errorMessages"
|
|
></v-text-field>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* Xeslint-disable */
|
|
//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.getBrowserFirstLanguage()
|
|
};
|
|
},
|
|
props: {
|
|
label: String,
|
|
rules: Array,
|
|
value: { type: Number, default: null },
|
|
readonly: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false },
|
|
errorMessages: { type: Array, default: null }
|
|
},
|
|
computed: {
|
|
currencyValue() {
|
|
return this.value;
|
|
}
|
|
},
|
|
methods: {
|
|
updateValue() {
|
|
let val = this.$refs.textField.$refs.input.value;
|
|
let parsedValue = parseCurrency(val, {
|
|
currency: this.currencyName,
|
|
locale: this.languageName
|
|
});
|
|
|
|
this.$emit("input", parsedValue);
|
|
}
|
|
}
|
|
};
|
|
</script>
|