【elementui】el-input只允许输入数字和输入小数时以.开头的数字自动补0

<template>
  <div class="number-input-wrap">
    <div>
      只可输入数字:
      <el-input
        v-model.trim="inputVal1"
        size="mini"
        @input="handleInput1($event)"
      ></el-input>
    </div>

    <div>
      可输入小数，.开头自动补0
      <el-input
        v-model.trim="inputVal2"
        size="mini"
        type="number"
        @input="handleInput2($event)"
      ></el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberInput',
  components: {},
  props: {},
  data() {
    return {
      inputVal1: '',
      inputVal2: '',
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleInput1(val) {
      // val.replace(/[^0-9]/g, '')  或  val.replace(/[^\d]/g, '')
      const onlyNumbers = val.replace(/[^\d]/g, '')
      if(val !== onlyNumbers) {
        this.inputVal1 = onlyNumbers
      }
    },
    handleInput2(val) {
      if(val.startsWith('.')) {
        this.inputVal2 = '0' + val
      }else {
        this.inputVal2 = val
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 200px;
}
</style>