vue輸入手機號自動加橫杆 如100-1234-1234

<template>
  <div class="login-wrapper">
    <form v-if="showInput" class="login-form">
      <div class="login-input phone">
        <span class="prefix">+86</span>
        <input
          class="input-wrapper"
          type="text"
          placeholder="請輸入手機號碼"
          placeholder-style="color:#C2CCD0;font-size:32rpx"
          v-model="phone"
          maxlength="13">
        <i class="iconfont iconGroup" v-if="phone" @click="phoneReset"></i>
      </div>
      <div class="login-input validator">
        <input
          class="input-wrapper"
          type="text"
          placeholder="請輸入驗證碼"
          v-model="phonecode"
          maxlength="4"
          placeholder-style="color:#C2CCD0">
        <span v-if="sec > 0" class="validator-span timeReset">{{sec}}s 後重發</span>
        <span v-else class="validator-span" @click="getValidator">{{sendCount > 0 ? '重新發送' : '獲取驗證碼'}}</span>
      </div>
      <span class="noValidator" @click="showModal">收不到驗證碼？</span>
      <div class="next-btn" :class="phone.length >= phoneNum && phonecode.length >= 4 ? 'active' : ''" @click="enter">
        <i class="iconfont iconxiangyou"></i>
      </div>
    </form>
    <div v-if="isMask">
      <div class="mask"></div>
      <div class="result">
        <div class="result-content">
          <div class="result-wrapper">
            <div class="result-title">收不到驗證碼</div>
            <div class="result-text">可能有以下原因：</div>
            <div class="result-subtitle">原因一：</div>
            <div class="result-text">請檢查是否停機、網絡延遲以及號碼是否正確</div>
            <div class="result-subtitle">原因二：</div>
            <div class="result-text">請檢查手機是否安裝了網絡監控或者短信攔截插件等</div>
          </div>
        </div>
        <div class="iknow" @click="closeModal">我知道了</div>
      </div>
    </div>
  </div>
</template>
<script>
import store from './store'

export default {
  data () {
    return {
      sendCount: 0,
      sec: 0,
      phone: '',
      isMask: false,
      timer: '',
      phoneNum: 13,
      phonecode: '',
      showInput: true
    }
  },
  computed: {
    realPhone () {
      return this.phone.split('-').join('')
    }
  },
  methods: {
    // 獲取驗證碼
    getValidator () {
      if (!this.judgeRightPhone()) return
      wx.showLoading({
        title: '獲取中'
      })
      this.sendCount++
      this.sec = 59
      this.countdown()
      store.dispatch('sendPhoneCode', {
        phone: this.realPhone
      }).then(res => {
        wx.hideLoading()
        wx.showToast({
          title: '驗證碼已經發往您的手機',
          icon: 'none'
        })
      }).catch(e => {
        wx.hideLoading()
        wx.showToast({
          title: e.error || '發送失敗',
          icon: 'none'
        })
      })
    },
    judgeRightPhone () {
      if (!(/^1(3|4|5|6|7|8)\d{9}$/.test(this.realPhone)) || this.phone.length !== 13) {
        wx.showToast({
          title: '請輸入正確手機號',
          icon: 'none'
        })
        return false
      } else {
        return true
      }
    },
    // 手機號碼置空
    phoneReset () {
      this.phone = ''
    },
    // 驗證碼倒計時
    countdown () {
      var that = this
      clearTimeout(this.timer)
      this.timer = setTimeout(function () {
        if (that.sec) {
          that.countdown()
          that.sec = that.sec - 1
        }
      }, 1000)
    },
    // 收不到驗證碼，提示彈窗
    showModal () {
      this.isMask = true
      this.showInput = false
    },
    closeModal () {
      this.isMask = false
      this.showInput = true
    },
    enter () {
      if (!this.judgeRightPhone()) return
    }
  },
  watch: {
    phone (newValue, oldValue) {
      let vlen = newValue.length
      let olen = oldValue.length
      // 輸入手機號
      if (vlen > olen) {
        if (vlen === 4 || vlen === 9) {
          this.phone = newValue.substring(0, vlen - 1) + '-' + newValue.substr(vlen - 1, 1)
        } else {
          this.phone = newValue
        }
      }
      // 粘貼手機號
      if (newValue.indexOf('-') === -1 && vlen > 3) { // 粘貼數字位數至少四位，才處理格式
        if (vlen < 8) {
          this.phone = newValue.substr(0, 3) + '-' + newValue.substr(3, vlen - 3)
        } else {
          this.phone = newValue.substr(0, 3) + '-' + newValue.substr(3, 4) + '-' + newValue.substr(7, vlen - 7)
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
.login-wrapper {
  background-color: #ffffff;
  height:100%;
  .login-form {
    position: relative;
    display: inline-block;
    width: 558rpx;
    margin: 332rpx 96rpx;
    z-index: 1;
    .login-input {
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 1rpx solid #D8D8D8;
    }
    .input-wrapper {
      display: inline-block;
      font-size:32rpx;
      height:100%;
      vertical-align:middle;
      :focus {
        font-size: 32rpx;
      }
    }
    .phone {
      position: relative;
      .prefix {
        width:76rpx;
        font-size:30rpx;
        font-weight:500;
        color:rgba(118,136,147,1);
        padding: 10rpx;
        background:#F6F8FC;
        border-radius: 8rpx;
        margin-right: 24rpx;
      }
      .iconGroup{
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28rpx;
        color: #CCCCCC;
      }
    }
    .validator {
      .validator-span {
        position: absolute;
        right: 0;
        font-size:28rpx;
        font-weight:500;
        color:rgba(69,152,240,1);
      }
      .timeReset {
        color:#C2CCD0;
      }
    }
    .noValidator {
      height:40rpx;
      font-size:28rpx;
      font-weight:500;
      color:#4598F0;
      line-height:32px;
    }
    .next-btn {
      position: absolute;
      top: 270rpx;
      right: 0;
      text-align: center;
      vertical-align: middle;
      width: 100rpx;
      height: 100rpx;
      background:linear-gradient(21deg,#9FC6F8 0%,#9ED1FC 56%,#9ED6FD 100%);
      border-radius:64px;
      line-height:100rpx;
      .iconxiangyou {
        font-size: 34rpx;
        color: #ffffff;
      }
    }
    .active {
      background:linear-gradient(21deg,rgba(67,129,236,1) 0%,rgba(62,170,250,1) 56%,rgba(60,186,255,1) 100%);
      box-shadow:0px 8px 30px 0px rgba(60,186,255,0.28);
      border-radius:64px;
    }
  }
  .mask {
    width:100%;
    height:100%;
    position:absolute;
    z-index:999;
    top:0;
    left:0;
    background:rgba(12,33,63,1);
    opacity:0.3;
  }
  .result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:534rpx;
    height:582rpx;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    border-radius:12rpx;
    color: #1D1D1D;
    z-index: 9999;
    font-size: 28rpx;
    font-weight: 500;
    .result-content {
      width: 100%;
      height: 490rpx;
      border-bottom: 1rpx solid #DCE1E8;
      .result-wrapper {
        width: 418rpx;
        height: 490rpx;
        position: absolute;
        top: 47%;
        left: 50%;
        margin-bottom: 32rpx;
        transform: translate(-50%,-50%);
        .result-title {
          font-size: 34rpx;
          margin-bottom: 32rpx;
          text-align: center;
        }
        .result-text {
          margin-bottom: 32rpx;
        }
        .result-subtitle {
          color: #768893;
          margin-bottom: 0;
        }
      }
    }
    .iknow {
      text-align: center;
      color: #4598F0;
      height: 86rpx;
      line-height: 86rpx;
    }
  }
}
</style>

更多：
https://blog.csdn.net/qq_38627581/article/details/80599485