Element Plus 中 el-input 限制为数值输入的方法

xvmingjiang2025-08-17 13:52

方法一：使用 type="number"

javascript 复制代码

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

<script setup>
import { ref } from 'vue';

const numberValue = ref('');
</script>

方法二：使用自定义指令过滤非数字

javascript 复制代码

<template>
  <el-input 
    v-model="numberValue" 
    v-number-only
    placeholder="只能输入数字"
  />
</template>

<script setup>
import { ref } from 'vue';

const numberValue = ref('');

// 自定义指令
const vNumberOnly = {
  mounted(el) {
    el.querySelector('input').addEventListener('input', (e) => {
      e.target.value = e.target.value.replace(/[^\d]/g, '');
    });
  }
};
</script>

方法三：使用 onInput 事件处理

javascript 复制代码

<template>
  <el-input 
    v-model="numberValue" 
    @input="handleNumberInput"
    placeholder="只能输入数字"
  />
</template>

<script setup>
import { ref } from 'vue';

const numberValue = ref('');

const handleNumberInput = (value) => {
  numberValue.value = value.replace(/[^\d]/g, '');
};
</script>