elmentPlus的input组件如何限制只能输入字母和数字

在Element Plus库的`<el-input>`组件中，要限制用户只能输入字母和数字，你可以通过设置`type`属性为`textarea`或`number`，然后配合自定义的`v-model.number`或`v-model.trim`绑定，并添加正则表达式验证。如果需要实时校验，可以利用`blur`事件。

下面是一个示例：

<template>
  <el-input
    v-model="value"
    type="text"  <!-- 或者 number -->
    :pattern="alphaNumRegex"
    @blur="validateInput"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      value: '',  // 输入框初始值
      alphaNumRegex: /^[a-zA-Z0-9]*$/  // 正则表达式，匹配字母和数字
    };
  },
  methods: {
    validateInput() {
      if (!this.alphaNumRegex.test(this.value)) {
        this.$refs.input.focus();  // 将焦点放回输入框，显示错误信息
        alert('只允许输入字母和数字！');
      }
    }
  }
};
</script>

在这个例子中，`@blur`事件会在用户停止键入并离开输入框时触发`validateInput`方法，检查输入是否符合正则表达式的规则。如果不符合，聚焦到输入框并显示警告。