一、问题描述：

    项目中需要用到手机号每添加后增加空格或增加横线。三四四的逻辑。那么，在vue，element-ui 组件中，如何实现呢。

二、效果图：

三、实现代码：

 <template slot="mobile">
    <el-input v-model="obj.mobile" placeholder="请输入手机号" @blur="checkRepeat" v-on:input="validateMobile"></el-input>
 </template>

 validateMobile (val) {
      if (val.length < 13) {
        if (val.length > 3 && val.length < 7) {
          val = val.replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1 ')
        } else if (val.length >= 7) {
          val = val.replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{4})(?=\d)/g, '$1 ')
        }
        this.$set(this.obj, 'mobile', val)
      }
 }

四、思路：

1、在组件的el-input标签中添加input事件的监听，change事件是对el-input的事件，会在blur事件后触发，所以要用input事件。

2、正则处理 val = val.replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1 ')

3、set方法。

ps: 觉得还是空格会好些，提交数据时trim下就可以，产品的逻辑是留下横线。。。。