如何使用 <b-input > 标签在 vuejs 中格式化电话（即 xxx-xxx-xxxx）

Posted 2023-02-23

【中文标题】如何使用 <b-input > 标签在 vuejs 中格式化电话（即 xxx-xxx-xxxx）

【英文标题】：How to format telephone (i.e. xxx-xxx-xxxx) in vuejs with <b-input > tag

【发布时间】：2019-02-18 12:49:09

【问题描述】：

我想在将电话号码绑定到文本框时启用文本框进行格式化。

【问题讨论】：

请提供您尝试过的示例代码。

【参考方案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(/(\d1,10)/g)[0];

						// Format display value based on calculated currencyValue
            this.formattedPhoneValue = this.phoneValue.replace(/(\d1,3)(\d1,3)(\d1,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>

【讨论】：

它应该在我们输入时在文本框中应用格式。

完成了，现在要试试吗？