vue3 elelemntui 限制input框只能输入正整数

可以通过在标签上绑定 @input 事件来监听标签的值变化，然后通过正则表达式来限制输入的值。具体实现方法如下：

<el-input v-model="inputValue" @input="handleInput"></el-input>

export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput() {
      this.inputValue = this.inputValue.replace(/[^\d]/g, ''); // 只保留数字
      if (this.inputValue === '') {
        this.inputValue = 0; // 如果输入为空，则默认为0
      }
    }
  }
}

另外，也可以使用自定义指令来实现限制输入正整数的功能。具体实现方法如下：

Vue.directive('numberOnly', {
  bind(el, binding, vnode) {
    el.handler = function() {
      let val = el.value.replace(/[^\d]/g, ''); // 只保留数字
      if (val === '') {
        val = 0; // 如果输入为空，则默认为0
      }
      vnode.componentInstance.$emit('input', val); // 触发input事件
    };
    el.addEventListener('input', el.handler);
  },
  unbind(el) {
    el.removeEventListener('input', el.handler);
  }
});

然后在需要限制输入正整数的 input 标签上使用 v-number-only 指令即可：

<el-input v-model="inputValue" v-number-only></el-input>