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

方法一:使用 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>
相关推荐
西洼工作室5 分钟前
Strapi快速入门:从安装到API开发
前端·后端
光影少年18 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些
前端·学习·web安全·前端框架
濑户川21 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
_Sem31 分钟前
KMP实战:从单端到跨平台的完整迁移指南
android·前端·app
Carry34533 分钟前
React 与 Vue 开发差异——CSS 样式
前端
前端九哥36 分钟前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_7644413336 分钟前
身份证校验工具
前端·python·1024程序员节
顽疲1 小时前
SpringBoot + Vue 集成阿里云OSS直传最佳实践
vue.js·spring boot·阿里云
4Forsee1 小时前
【Android】View 事件分发机制与源码解析
android·java·前端
VT.馒头1 小时前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节