el-input限制输入0-100的数字，最多四位小数

<template>
<el-input
	min="0"
	max="100"
	clearable
	type="number"
	step="0.0001"
	class="!w-[120px]"
	placeholder="输入检测值"
	v-model="value"
	@input="
	  value =
		value.replace(
		  /^(100|[1-9]?\d)(\.\d{0,4})?.*$/,
		  '$1$2'
		)
	"
</el-input>
<template>

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

const value = ref();
</script>

/** 去掉input右边的上下箭头 */
<style lang="scss" scoped>
:deep(input::-webkit-outer-spin-button),
:deep(input::-webkit-inner-spin-button) {
 -webkit-appearance: none !important;
}
:deep(input[type="number"]) {
 appearance: textfield;
 -moz-appearance: textfield;
}
</style>

详细解释

1. ^(100|[1-9]?\d):

   • 100|: 匹配 100。
   • [1-9]?\d: 匹配 0-99 的数字。
     • [1-9]?: 匹配 1-9 的数字，出现 0 次或 1 次。
     • \d: 匹配一个数字（0-9）。

2. (\.\d{0,4})?:

   • \.: 匹配小数点。
   • \d{0,4}: 匹配 0 到 4 位数字。
   • (...): 圆括号用于捕获匹配的子字符串。
   • ?: 表示前面的模式是可选的（零次或一次）。

3. .*$: 匹配任意字符零次或多次，直到字符串的结尾。

4. 替换字符串 '$1$2':

   • $1: 表示第一个捕获组，即整数部分。
   • $2: 表示第二个捕获组，即小数部分。

5. type="number": 确保输入框只能输入数字。

6. step="0.0001": 设置步长为 0.0001，以允许最多四位小数。

7. min="0" 和 max="100": 设置输入的最小值和最大值。

8. @input 事件: 使用正则表达式确保输入的整数部分在 0 到 100 之间，并且最多四位小数。

示例

• 如果 value 是 "123.45678abc"，替换后会变成 "23.4567"（因为 123 超出了 0-100 的范围）。
• 如果 value 是 "99.9999xyz"，替换后会变成 "99.9999"。
• 如果 value 是 "100.1234"，替换后会变成 "100.1234"。
• 如果 value 是 "0.1234"，替换后会变成 "0.1234"。