element plus Vue3 中input 标签如何控制输入位数

在Vue3中使用Element Plus库时，如果你想限制`<el-input>`标签中的输入位数，你可以通过结合Element Plus提供的`clearable`属性以及自定义的事件处理器来实现。以下是一个简单的示例：

<template>
  <el-input
    v-model.number="value" <!-- 使用number修饰符确保输入的是数字 -->
    :max="maxLength"   <!-- 设置最大允许输入的位数 -->
    placeholder="请输入最多{{ maxLength }}位数字"
    @input="(e) => handleInput(e)"  <!-- 自定义事件处理器 -->
    clearable
  ></el-input>
</template>

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

const value = ref(0); // 初始化值
const maxLength = ref(5); // 最大长度

// 输入处理函数，检查输入是否超过最大长度
function handleInput(e) {
  if (Number(e.target.value).toString().length > maxLength.value) {
    e.target.value = e.target.value.slice(0, maxLength.value);
  }
}
</script>

在这个例子中，`v-model.number`用于绑定一个数值型的值，并限制用户只能输入数字。`:max`属性设置了最大输入长度。`@input`事件会在每次输入变化时触发，`handleInput`函数会检查并截断多余的字符。