vue3+element plus input输入框限制输入

在Vue 3和Element Plus中，可以使用`el-input`组件来创建输入框，并通过设置`maxlength`和`oninput`属性来限制输入。以下是一个示例：

<template>
  <el-input
    v-model="inputValue"
    :maxlength="maxLength"
    :oninput="handleInput"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      maxLength: 10
    };
  },
  methods: {
    handleInput(event) {
      if (event.target.value.length > this.maxLength) {
        this.inputValue = event.target.value.slice(0, this.maxLength);
      }
    }
  }
};
</script>

在上面的示例中，我们使用了`v-model`指令来绑定输入框的值到`inputValue`属性上。`maxlength`属性设置了输入框的最大字符数限制为10。`oninput`属性绑定了一个处理方法`handleInput`，在输入框的值发生变化时触发。

在`handleInput`方法中，我们检查输入框的值的长度是否超过了最大限制。如果超过了限制，我们通过`slice`方法截取前面的字符，并将结果赋值给`inputValue`属性，这样就实现了限制输入的功能。

这样，在输入框中输入超过最大限制的字符时，它们将被自动截断。