uniapp 实现输入电话号码格式化

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

项目要求完成一个注册功能，为了美观要求将手机号码格式化，且调起的是用户的数字键盘

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现思路

uniapp的输入框input可选type有以下几种

刚开始遇到一个问题，type为number时调起数字键盘但是直接监控输入值连接空字符串时相当于把输入值转换成了字符串格式，input框直接限制显示。
于是转换思路，在input框下面放一个用于显示的div，这样上层的input用于绑定方法，下层用于显示

二、实现

代码如下（示例）：

 <view class="input-text">{{phone.replace(/\s/g,'').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3')}}</view>
  <view class="icon">+86</view>
  <input
     type="number"
     class="input-value"
     @input="inputPhone"/>

input-value 的z-index要设置得比input-text高

总结

感觉这个方法还是有点粗糙，不知道大家还有没有更好的实现方法呢。