60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
|
<q-input
|
|
ref="inputRef"
|
|
v-model="formattedValue"
|
|
:dense="dense"
|
|
:outlined="edit"
|
|
:class="
|
|
edit == true
|
|
? 'full-width inputgreen cursor-pointer'
|
|
: 'full-width cursor-pointer'
|
|
"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
hide-bottom-space
|
|
>
|
|
<template v-for="slot in slots">
|
|
<slot :name="slot" />
|
|
</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: {
|
|
type: Number,
|
|
default: undefined,
|
|
},
|
|
dense: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
edit: {
|
|
type: Boolean,
|
|
},
|
|
});
|
|
|
|
const { inputRef, formattedValue, setValue } = useCurrencyInput({
|
|
locale: "th-TH",
|
|
currency: "THB",
|
|
currencyDisplay: "hidden" as any,
|
|
hideCurrencySymbolOnFocus: true,
|
|
hideGroupingSeparatorOnFocus: true,
|
|
hideNegligibleDecimalDigitsOnFocus: true,
|
|
autoDecimalDigits: false,
|
|
useGrouping: true,
|
|
accountingSign: false,
|
|
});
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(value: any) => {
|
|
setValue(value);
|
|
}
|
|
);
|
|
</script>
|