63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<q-input
|
||
|
|
ref="inputRef"
|
||
|
|
v-model="formattedValue"
|
||
|
|
:dense="dense"
|
||
|
|
:outlined="outlined"
|
||
|
|
:class="className"
|
||
|
|
:readonly="readonly"
|
||
|
|
:borderless="borderless"
|
||
|
|
>
|
||
|
|
<template v-for="(_, slot) in slots" v-slot:[slot]="scope">
|
||
|
|
<slot :name="slot" v-bind="scope || {}" />
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useCurrencyInput } from "vue-currency-input";
|
||
|
|
import { ref, useSlots, watch } from "vue";
|
||
|
|
|
||
|
|
const slots = ref<any>(useSlots());
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: Number,
|
||
|
|
dense: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
outlined: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
readonly: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
borderless: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
className: String,
|
||
|
|
});
|
||
|
|
|
||
|
|
const { inputRef, formattedValue, setValue } = useCurrencyInput({
|
||
|
|
locale: "en-US",
|
||
|
|
currency: "EUR",
|
||
|
|
currencyDisplay: "hidden",
|
||
|
|
hideCurrencySymbolOnFocus: true,
|
||
|
|
hideGroupingSeparatorOnFocus: true,
|
||
|
|
hideNegligibleDecimalDigitsOnFocus: true,
|
||
|
|
autoDecimalDigits: false,
|
||
|
|
useGrouping: true,
|
||
|
|
accountingSign: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.modelValue,
|
||
|
|
(value) => {
|
||
|
|
setValue(value);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|