Đầu tiên bạn tạo file vue template /components/format-mask.vue như bên dưới:
<template>
<input type="text" v-model="val" @focus="focus = true" @blur="focus = false"/>
</template>
Sau đó thêm xử lý js như bên dưới:
export default {
props: ['modelValue', 'format'],
data(){
return {
focus: false
};
},
computed: {
val: {
get(){
if (this.focus) return this.modelValue;
if (this.format) return this.format.replace(':value', this.$filters.comma(this.modelValue));
return this.$filters.comma(this.modelValue);
},
set(val){
this.$emit("update:modelValue", val.replaceAll(',', ''));
}
}
}
}
Lưu lại và sử dụng component như thông thường code mẫu bên dưới:
import inputmask from './components/format-mask.vue';
<format-mask :readonly="!permission" v-model="valueItem" placeholder="Cost" class="form-control"
:class="{ 'border-danger': errors.cost }"></format-mask>
