el-input-number 禁止输入 只能点击

### 实现 `el-input-number` 禁用键盘输入

为了使 `el-input-number` 组件只响应点击加减按钮而不允许手动输入，可以通过监听特定事件并阻止默认行为来实现。具体做法如下：

在模板部分定义 `el-input-number` 并绑定相应的事件处理函数以防止键盘输入操作。

<template>
  <el-input-number 
    v-model="num" 
    @keydown.native.prevent
    :controls="true"
  ></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
};
</script>

上述代码片段中，`:controls="true"` 属性确保显示增减控件[^1]；而 `@keydown.native.prevent` 则用于拦截所有的按键事件，从而达到禁用键盘输入的效果[^2]。

对于样式上的调整，如果希望进一步优化用户体验，比如移除上下箭头，则可以根据浏览器的不同应用对应的CSS规则[^4]:

/* 移除 Webkit 浏览器中的上下箭头 */
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* 移除 Firefox 中的上下箭头 */
::v-deep input[type='number'] {
  -moz-appearance: textfield;
}

通过以上配置，可以有效地让 `el-input-number` 只能通过点击两侧的按钮来进行数值的变化，满足需求的同时也提升了界面的一致性和易用性。