如何防止用户输入非数字字符？

为了防止用户在Element Plus的`el-input`中输入非数字字符，除了使用`v-model.number`之外，还可以利用Vue的`watch`属性监听`value`的变化，并在内部进行正则表达式匹配或校验。这里有一个示例：

<template>
  <el-input v-model="inputValue" :disabled="isEditing && invalidInput" @blur="checkInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isEditing: false,
      invalidInput: false,
    };
  },
  watch: {
    inputValue(newVal, oldVal) {
      if (!/^\d*$/.test(newVal)) { // 使用正则表达式检查是否全由数字组成
        this.invalidInput = true;
      } else {
        this.invalidInput = false;
      }
    },
  },
  methods: {
    checkInput() {
      this.isEditing = false; // 输入框失去焦点时结束编辑状态
    },
  },
  directives: {
    inputFilter: {
      inserted: function(el, binding, vnode) {
        el.addEventListener('input', () => {
          let value = el.value.replace(/\D/g, '');
          el.value = value;
          vnode.context.$set(binding.expression, value); // 更新绑定的model
        });
      },
    },
  },
};
</script>

这个例子中，我们使用了正则表达式`/^\d*$/`来验证输入是否全部由数字构成。如果输入含有非数字字符，我们会标记`invalidInput`为`true`，并在必要时禁用输入。