56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<div class="control has-icons-left">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
:placeholder="placeholder || ''"
|
|
v-model="value"
|
|
:disabled="disabled || false"
|
|
inputmode="numeric"
|
|
autocomplete="tel"
|
|
/>
|
|
<span class="icon is-left">
|
|
<SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["record", "attr", "placeholder", "disabled"],
|
|
|
|
data() {
|
|
return {
|
|
value: "",
|
|
};
|
|
},
|
|
|
|
created() {
|
|
const initial = this.record?.[this.attr];
|
|
this.value = initial ? String(initial) : "";
|
|
},
|
|
|
|
watch: {
|
|
/** giống InputEmail.vue: watch value → emit ngay */
|
|
value(newVal) {
|
|
// giữ lại CHỈ chữ số
|
|
const digits = String(newVal).replace(/\D/g, "");
|
|
|
|
// sync lại UI nếu user nhập ký tự khác số
|
|
if (digits !== newVal) {
|
|
this.value = digits;
|
|
return;
|
|
}
|
|
|
|
// emit string số hoặc null
|
|
this.$emit("phone", digits.length ? digits : null);
|
|
},
|
|
|
|
record(newVal) {
|
|
const v = newVal?.[this.attr];
|
|
this.value = v ? String(v) : "";
|
|
},
|
|
},
|
|
};
|
|
</script>
|