vue 输入框输入4位一空格，控制16位有效字符

需求：输入卡号的时候，四位一空格显示，控制16位有效字符

实现过程

<input type="tel" v-model="code"  ref="code" @input="cardCount(e)" placeholder="请输入" />

 解决方法如下：

 cardCount() {
   // 获取当前光标的位置
  var caret =this.$refs.code.selectionEnd
   // 从左边沿到坐标之间的空格数
  var sp = (this.code.slice(0, caret).match(/\s/g) || []).length
   // 去掉所有空格
  var nospace = this.code.replace(/\s/g, '')
   // 重新插入空格
  this.code= nospace.replace(/\D+/g, '').replace(/(\d{4})/g, '$1 ').trim()
   // 从左边沿到原坐标之间的空格数
  var curSp = (this.code.slice(0, caret).match(/\s/g) || []).length
   // 修正光标位置
  var selectionEnd = caret + curSp - sp
  setTimeout(() => {
    this.$refs.code.setSelectionRange(selectionEnd, selectionEnd)
  }, 0)
 }

原实现方法：缺点删除一位会错位

cardCount(e) {
      // 获取光标
      var pos = e.target.selectionStart
      // 获取到输入后的结果
      var value = this.code.replace(/\D/g, '') // 正则表达式：如果输入框中输入的不是数字或者空格，将不会显示；
      // 将结果去掉空格
      value = removeSpace(value)
      // 光标做判断
      if ((this.keyCode && this.keyCode == 8) || (e.inputType && e.inputType == 'deleteContentBackward')) {
        if (value.length % 4 == 0) {
          pos = pos - 1
        }
      } else {
        if (pos % 4 == parseInt(pos / 4)) {
          pos = pos + 1
        }
      }
      // 判断长度如果大于16位，截取前16位
      if (value.length > 16) {
        value = value.substring(0, 16)
      }
      // 将结果加入空格返回
      var newValue = addspace(value)
      this.code= newValue
      // 移除空格
      function removeSpace(old) {
        return old.replace(/\s/g, '')
      }
      // 每4位添加空格
      function addspace(old) {
        return old.replace(/(\d{4})(?=\d)/g, '$1 ').trim()
      }
      // 设置光标
      setTimeout(() => {
        // this.$refs.redeem.focus();
        this.$refs.code.setSelectionRange(pos, pos)
      }, 0)
    },