el-input 限制输入数字方法

可以，而且只用样式就能干掉 .is-error 的视觉效果，不影响 el-form 的校验逻辑 👍

但有个前提你要清楚：

👉 el-form 的错误态是加在外层 .el-form-item.is-error 上的
👉 然后通过层级选择器影响内部的 .el-input__wrapper / __inner

所以你要做的不是改 el-input，而是在你这个自定义控件作用域里“截断错误态样式”

✅ 最稳方案（Scoped + :deep 覆盖）

假设你的自定义组件叫 SmartInput

<style scoped>

/* 覆盖 error 状态下的边框 */

:deep(.el-form-item.is-error .el-input__wrapper) {

box-shadow: 0 0 0 1px var(--el-input-border-color) inset !important;

}

/* 覆盖 hover */

:deep(.el-form-item.is-error .el-input__wrapper:hover) {

box-shadow: 0 0 0 1px var(--el-input-border-color) inset !important;

}

/* 覆盖 focus */

:deep(.el-form-item.is-error .el-input__wrapper.is-focus) {

box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;

}

/* 去掉红色 caret / 文字（如果你看到的话） */

:deep(.el-form-item.is-error .el-input__inner) {

color: inherit;

}

</style>

🧠 关键点解释（你需要知道的本质）

1️⃣ Element Plus 错误态本质

不是直接改 input，而是：

.el-form-item.is-error .el-input__wrapper {

box-shadow: 0 0 0 1px var(--el-color-danger) inset;

}

👉 所以你只要把这个 danger 替换回正常颜色 就行

2️⃣ 为什么必须用

:deep

因为你这个组件是：

👉 自定义组件 → 里面嵌 el-input
👉 .is-error 在父组件 el-form-item 上

scoped 默认穿不透

3️⃣ 为什么用 box-shadow 覆盖

Element Plus v2.x：

👉 边框是用 box-shadow 画的，不是 border

⚠️ 注意一个坑

如果你这样写：

.el-input__wrapper {

border: 1px solid #ccc;

}

👉 ❌ 没用，因为：

真实边框还是 box-shadow

error 状态优先级更高

🚀 更干净的方案（推荐）

如果你这个控件是“特例”，可以加一个 class 限定：

<el-form-item class="no-error-style">

然后：

:deep(.no-error-style.is-error .el-input__wrapper) {

box-shadow: 0 0 0 1px var(--el-input-border-color) inset !important;

}

<template>

<el-input

:model-value="value"

placeholder="请输入数字"

@update:model-value="handleInput"

@blur="handleBlur"

/>

</template>

<script setup lang="ts">

import { ref } from 'vue'

const value = ref('')

const handleInput = (val: string) => {

let newVal = val

// 1. 只允许数字和小数点

newVal = newVal.replace(/[^\d.]/g, '')

// 2. .5 => 0.5

if (newVal.startsWith('.')) {

newVal = '0' + newVal

}

// 3. 只保留第一个小数点

newVal = newVal.replace('.', '#')

newVal = newVal.replace(/\./g, '')

newVal = newVal.replace('#', '.')

// 4. 只允许小数点后两位

newVal = newVal.replace(/^(\d+)\.(\d{0,2}).*$/, '$1.$2')

// 5. 最大不超过 100

// 允许中间态：比如 12.

if (newVal !== '' && newVal !== '0.' && !newVal.endsWith('.')) {

const num = Number(newVal)

if (num > 100) {

newVal = '100'

}

}

value.value = newVal

}

const handleBlur = () => {

let newVal = value.value

// blur 后不允许最后是小数点

if (newVal.endsWith('.')) {

newVal = newVal.slice(0, -1)

}

// blur 后兜底最大值

if (newVal !== '' && Number(newVal) > 100) {

newVal = '100'

}

value.value = newVal

}

</script>

<template>
<el-input
:model-value="value"
placeholder="请输入数字"
@update:model-value="handleInput"
@blur="handleBlur"
/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const handleInput = (val: string) => {
let newVal = val

// 1. 只允许数字和小数点
newVal = newVal.replace(/[^\d.]/g, '')

// 2. .5 => 0.5
if (newVal.startsWith('.')) {
newVal = '0' + newVal
}

// 3. 只保留第一个小数点
newVal = newVal.replace('.', '#')
newVal = newVal.replace(/\./g, '')
newVal = newVal.replace('#', '.')

// 4. 前导0处理（核心新增）
// 规则：
// - 允许 "0"
// - 允许 "0.xxx"
// - 禁止 "00"、"01"、"00012"
if (newVal.startsWith('0') && newVal.length > 1) {
if (newVal[1] !== '.') {
// 去掉多余前导0，例如 01 -> 1，00012 -> 12
newVal = newVal.replace(/^0+/, '')
}
}

// 5. 只允许小数点后两位
newVal = newVal.replace(/^(\d+)\.(\d{0,2}).*$/, '$1.$2')

// 6. 最大不超过 100（允许中间态 12.）
if (newVal !== '' && newVal !== '0.' && !newVal.endsWith('.')) {
const num = Number(newVal)
if (num > 100) {
newVal = '100'
}
}

value.value = newVal
}

const handleBlur = () => {
let newVal = value.value

// blur 后不允许以 . 结尾
if (newVal.endsWith('.')) {
newVal = newVal.slice(0, -1)
}

// 再做一次前导0兜底（防极端情况）
if (newVal.startsWith('0') && newVal.length > 1 && !newVal.startsWith('0.')) {
newVal = newVal.replace(/^0+/, '')
}

// 最大值兜底
if (newVal !== '' && Number(newVal) > 100) {
newVal = '100'
}

value.value = newVal
}
</script>

type Value = string | number

type Option = {
label: string
value: Value
}

type Operator = '>' | '>=' | '<' | '<=' | '='

type Condition = {
op: Operator
value: Value
}

function checkByRawListOrder(
rawList: Option[],
currentValue: Value,
conditions: Condition | Condition[]
): boolean {
const conditionList = Array.isArray(conditions) ? conditions : [conditions]

// 1️⃣ 构建 indexMap（只做一次）
const indexMap = new Map<Value, number>()
rawList.forEach((item, index) => {
indexMap.set(item.value, index)
})

// 2️⃣ 收集所有需要校验的 value
const allValues = [
currentValue,
...conditionList.map(c => c.value)
]

// 3️⃣ 统一校验：是否全部存在
const notFoundValues = allValues.filter(v => !indexMap.has(v))

if (notFoundValues.length > 0) {
console.error(
'[checkByRawListOrder] 以下 value 不存在于原始数组中:',
notFoundValues,
'\n当前 rawList:',
rawList
)
return false
}

// 4️⃣ 开始计算
const currentIndex = indexMap.get(currentValue)!

return conditionList.every(condition => {
const targetIndex = indexMap.get(condition.value)!

switch (condition.op) {
case '>':
return currentIndex > targetIndex

case '>=':
return currentIndex >= targetIndex

case '<':
return currentIndex < targetIndex

case '<=':
return currentIndex <= targetIndex

case '=':
return currentIndex === targetIndex

default:
return false
}
})
}

/* 核心控制 */
:deep(.auto-height-dialog) {
/* ❗关键1：去掉最大高度限制 */
max-height: none !important;

/* ❗关键2：不允许内部滚动 */
overflow: visible !important;
}

/* body 默认是会限制高度并滚动的，必须干掉 */
:deep(.auto-height-dialog .el-dialog__body) {
max-height: none !important;
overflow: visible !important;
}

/* 外层容器默认会帮你兜底滚动，也要关掉 */
:deep(.el-overlay-dialog) {
overflow: hidden !important;
}