Маска номера телефона выведена в отдельный компонент, чтобы можно было применить его в разных компонентах.
Создан файл Vue PhoneNumber.Vue
<template src="./template.html"/>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PhoneNumberView',
props: ['value'],
beforeMount(): void {
this.number = this.value || '+7 ';
},
data: function () {
return {
number: '',
}
},
methods: {
numberChange() {
this.number = this.number.replace(/^\+7(\d{3})?(\d{3})?(\d{4})?/g, '+7 ($1) $2-$3')
this.$emit('numberChange', this.number);
}
}
});
</script>
<style scoped lang="less" src="./style.less"></style>
Далее создан шаблон template.html:
<el-input
v-model="number"
:clearable="true" :show-word-limit="true"
:autosize="true"
@blur="numberChange"
/>
в данном шаблоне используется вызов метода NumberChange, который и использует регульное выражение.
Далее поле создается в др компоненте и вызывается метод NumberChange:
<el-form-item label="Телефон" prop="telephone">
<PhoneNumber :value="localData.telephone" @numberChange="numberChange"/>
</el-form-item>
И при заполнении поля и клике за его пределами первый раз, все норм:
Но стоит клиткнуть еще пару раз, то все ломается:
Как это можно исправить или метод @blur нужно заменить на что-то другое? Хелп!!
