纯数字键盘

<!--  -->
<template>
  <div class="formInvite">
    <div class="formInvite-tel">
      <input
        type="tel"
        pattern="[0-9]*"
        maxlength="11"
        ref="resize"
        placeholder="请输入手机号"
        @focus="inpFocus"
        @blur="inpBlur"
        v-model="phone"
      />
    </div>
    <div class="formInvite-yz">
      <input
        placeholder="请输入验证码"
        type="text"
        pattern="[0-9]*"
        maxlength="6"
        @focus="inpFocus"
        @blur="inpBlur"
        v-model="val"
      />
      <span>58秒后重发</span>
    </div>
    <!-- <div class="back formInvite-bt"></div> -->
    <st-button class="back formInvite-bt" @click="submit">注册</st-button>
  </div>
</template>


<script>
import stButton from '$com/st/button'
// foucse
export default {
  components: { stButton },
  data () {
    return {
      phone: "",
      val: ""
    };
  },
  computed: {},
  beforeMount () { },
  mounted () {

  },
  methods: {
    submit () {
      if (this._.random(0, 1, false)) {
        this.$toast({
          duration: 1000,
          message: '注册失败!'
        });
      } else {
        this.$router.push({
          name: "polite",
          params: {
            from: "1"
          }
        })
      }
      console.log(123456)
    }
  },
  watch: {
    phone (val, oldVal) {
        if (val == ".") {
        this.number = ""
        return
      }
      if (val.split(".").length > 2) {
        this.number = oldVal
        return
      }
      this.phone = val.replace(/[^\d]/g, '')
    },
    val (val, oldVal) {
        if (val == ".") {
            this.number = ""
            return
          }
          if (val.split(".").length > 2) {
            this.number = oldVal
            return
          }
      this.val = val.replace(/[^\d]/g, '')
    },
  }

}

</script>

<style lang='scss' scoped>
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
  font-size: 14px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
  font-size: 14px;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999999;
  font-size: 14px;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
  font-size: 14px;
}

$width-inp: 290px;

.formInvite {
  width: 100%;
  @extend .flex;
  justify-content: center;
  flex-direction: column;
  &-tel {
    width: $width-inp;
    height: 40px;
    input {
      width: 100%;
      height: 100%;
      background: rgba(253, 238, 241, 1);
      border-radius: 6px;
      border: none;
      outline: none;
      font-size: 14px;
      padding: 0 15px;
      // letter-spacing: 0.2px;
    }
  }

  &-yz {
    margin: 10px 0;
    width: $width-inp;
    height: 40px;
    @extend .flex;
    input {
      padding: 0 15px;
      width: 174px;
      height: 100%;
      background: rgba(253, 238, 241, 1);
      border-radius: 6px;
      border: none;
      outline: none;
      color: #333333;
      font-size: 14px;
      padding: 0 15px;
    }

    span {
      width: 100px;
      height: 40px;
      @extend .flex;
      justify-content: center;
      background: rgba(#ffb444, 0.95);
      border-radius: 6px;
      border: 1px solid rgba(252, 255, 106, 1);
      font-size: 16px;
      color: rgba(252, 255, 106, 1);
    }
  }

  &-bt {
    width: $width-inp;
  }
}
</style>

2 带小数点的

 <input
          type="text"
          :placeholder="`POOL余额${balance}`"
          v-model.trim="vote.number"
          @input="saveNumberData"
          maxlength="20"
        />

 vote: {
        number: "",
        poolTimeId: '',
        name: ""
      },
 saveNumberData () {
      this.checkFloatNumber(this.vote.number);
    },
    checkFloatNumber (val) {
      let reg = new RegExp(/^[0-9]+(.[0-9]{1,4})?$/);
      let length_1 = val.length - 1;
      let length_2 = val.length - 2;
      if (val) { // 当输入了值
        if (!reg.test(val)) { // 并且值不合法

          if (reg.test(val.substr(0, length_1))) { // 如果除去最后一位前面的合法
            if (val.charAt(length_1) == '.' && val.indexOf('.') == length_1) {
              // 当最后一位为小数点并且值中只有一个小数点，则保留值
              this.vote.number = val;
            } else {
              // 否则去掉最后一位
              this.vote.number = val.substr(0, length_1);
            }
            // 如果除去最后两位前面的合法并且最后两位都是小数点，就去掉最后一位
          } else if (reg.test(val.substr(0, length_2)) && val.charAt(length_1) == '.' && val.indexOf('.') == length_2) {
            this.vote.number = val.substr(0, length_1);
            // 否则
          } else {
            // 如果值只有一位且是小数点，或者值有两位且是‘0.’，则把值置为‘0.’
            if (val == '.' || val.substr(0, length_1) == '0.') {
              this.vote.number = '0.';
            } else {
              // 否则提示并清空
              let instance = this.$toast('请输入正确的数值');
              setTimeout(() => {
                instance.close();
                this.vote.number = '';
              }, 1000);
            }
          }
        } else {
          // 值合法的时候
          // 如果第一位为0且第二位存在且第二位不是小数点，提示并清空值
          if (val.charAt(0) == 0 && val.charAt(1) && val.charAt(1) !== '.') {
            let instance = this.$toast('请输入正确的数值');
            setTimeout(() => {
              instance.close();
              this.vote.number = '';
            }, 1000);
          } else {
            // 否则保留值
            this.vote.number = val;
          }
        }
      }

    },