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>
相关推荐
在逃的吗喽3 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn3 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux
小Tomkk3 小时前
AI 提效:利用 AI 从前端 快速转型为UI/UX设计师和产品
前端·人工智能·ui
Demoncode_y4 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
杨超越luckly4 小时前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点
Never_Satisfied4 小时前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html
Never_Satisfied4 小时前
在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析
开发语言·javascript·html
皮蛋瘦肉粥_1214 小时前
pink老师html5+css3day02
前端·css3·html5
qianmo20214 小时前
基于pycharm实现html文件的快速实现问题讨论
前端·html
IT_陈寒4 小时前
SpringBoot3踩坑实录:一个@Async注解让我多扛了5000QPS
前端·人工智能·后端