如何限制el-input只能录入数字和小数点？

以下是两种限制el-input只能录入数字和小数点的方法：
1.使用vue-number-directive插件

<template>
  <el-input v-model="inputValue" v-number />
</template>

<script>
import VueNumber from 'vue-number-directive'

export default {
  directives: {
    number: VueNumber,
  },
  data() {
    return {
      inputValue: '',
    }
  },
}
</script>

2.使用正则表达式

<template>
  <el-input v-model="inputValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    }
  },
  methods: {
    handleInput() {
      this.inputValue = this.inputValue.replace(/[^\d.]/g, '') // 只保留数字和小数点
      this.inputValue = this.inputValue.replace(/^\./g, '') // 第一个字符不能是小数点
      this.inputValue = this.inputValue.replace(/\.{2,}/g, '.') // 不能出现多个小数点
      this.inputValue = this.inputValue.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 只能有一个小数点
    },
  },
}
</script>