Vue与Element el-input 限制为正数输入

Vue.js 和 Element UI 的 `el-input` 组件可以结合使用来创建一个只允许输入正数的文本框。在Element UI 中，`el-input` 提供了事件处理器 `input` 可以实时监听用户输入，并通过自定义验证规则来限制输入。

首先，在你的Vue组件里，你需要导入`el-input`和相关的验证方法：

<template>
  <el-form-item label="正数输入">
    <el-input v-model.number="numberInput" @input="validatePositiveNumber"></el-input>
  </el-form-item>
</template>

<script>
import { ElFormItem, ElInput } from 'element-plus';
export default {
  components: {
    ElFormItem,
    ElInput
  },
  data() {
    return {
      numberInput: null,
    };
  },
  methods: {
    validatePositiveNumber(e) {
      const value = Number(this.numberInput);
      if (isNaN(value) || value <= 0) {
        this.$refs.input.clear();
        // 或者设置一个错误提示
        this.$emit('update:numberInput', '');
      }
    },
  },
};
</script>

在这个例子中，我们使用了`.number`修饰符绑定到v-model上，确保值总是数字类型。当用户输入时，`validatePositiveNumber`方法会被调用，检查输入是否为非数字或者小于等于零。如果是，就清空输入并可能显示错误提示。