【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符

在Vue和Element UI中，可以使用el-input-number组件来限制用户输入。你可以使用@keydown事件来监听键盘事件，并编写逻辑来限制输入。

以下是一个简单的例子，展示了如何在el-input-number中使用键盘事件来限制输入：

<template>
  <el-input-number
    v-model="number"
    :min="1"
    :max="10"
    @keydown.native="handleKeyDown"
  ></el-input-number>
</template>
 
<script>
export default {
  data() {
    return {
      number: 1,
    };
  },
  methods: {
    handleKeyDown(event) {
      // 允许的按键
      const allowedKeys = [
        'Backspace', 'Delete', 'Tab', 'Escape', 'ArrowLeft', 'ArrowRight',
        'Meta', 'Control', 'Alt', 'Shift',
      ];
 
      // 如果是数字键盘的按键或不允许的按键，则阻止事件
      if (!(event.keyCode >= 48 && event.keyCode <= 57) && !allowedKeys.includes(event.key)) {
        event.preventDefault();
      }
    },
  },
};
</script>

在这个例子中，handleKeyDown方法会在用户按下键盘时被触发。我们检查按下的键是否是数字键（0-9），如果不是，我们还检查是否是允许的按键。如果不是数字也不是特定的按键，我们使用event.preventDefault()来阻止事件的默认行为，即阻止用户输入。这样就可以限制用户只能输入数字，并且可以自由使用箭头键进行增减操作。