Как отформатировать телефон (например, xxx-xxx-xxxx) в vuejs с тегом <b-input>

Я хочу, чтобы текстовое поле принимало форматирование при привязке номера телефона к текстовому полю.

Приведите пример кода того, что вы пробовали.

Alejandro Vales 13.09.2018 20:14
3
1
4 851
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Учитывая, что в вопросе не так много информации о том, что было опробовано или как этого добиться, я просто сделаю общий компонент, который вы можете повторно использовать в дальнейшем.

Что вы можете сделать с помощью наблюдателя и регулярного выражения в поле, которое форматирует число в соответствии с тем, что вы хотите отобразить

Vue.component('my-phone-input', {
    template: `
        <div>
            <input type="text" v-model="formattedPhoneValue" @keyup="focusOut" @blur="focusOut"/>
        </div>`,
    data: function() {
        return {
            phoneValue: 0,
            formattedPhoneValue: "0",
            preventNextIteration: false
        }
    },
    methods: {
        focusOut: function(event) {
            if (['Arrow', 'Backspace', 'Shift'].includes(event.key)) {
            		this.preventNextIteration = true;
                return;
            }
            if (this.preventNextIteration) {
		            this.preventNextIteration = false;
            		return;
            }
            this.phoneValue = this.formattedPhoneValue.replace(/-/g, '').match(/(\d{1,10})/g)[0];

						// Format display value based on calculated currencyValue
            this.formattedPhoneValue = this.phoneValue.replace(/(\d{1,3})(\d{1,3})(\d{1,4})/g, '$1-$2-$3');
        }
    }
});

new Vue({
    el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
    <my-phone-input></my-phone-input>
</div>

Он должен применять форматирование с помощью в текстовом поле, пока мы вводим в него.

Bhanu Pratap 14.09.2018 15:24

Готово, вы хотите попробовать сейчас?

Alejandro Vales 14.09.2018 16:30

Другие вопросы по теме