Vue实现month输入框上下按键（38/40）反向触发的方法

我明白你的需求——就是把<input type="month">的上下键逻辑反过来，按上键（KeyCode 38）时触发月份减少，按下键（KeyCode 40）时触发月份增加对吧？既然你已经通过@keyup.38.prevent和@keyup.40.prevent阻止了默认行为，那用Vue单独实现的话，有两种靠谱的方案，我给你详细拆解：

方案一：模拟原生按键事件触发 #

这种方案的思路是，当用户按下上键时，我们手动触发下键的原生事件；按下下键时，触发上键的事件，完全复用浏览器原生的月份增减逻辑。

实现代码 #

<template>
  <input 
    type="month" 
    ref="monthInput"
    @keyup.38.prevent="triggerDownKey"
    @keyup.40.prevent="triggerUpKey"
  >
</template>

<script>
export default {
  methods: {
    triggerDownKey() {
      // 创建并触发下键（KeyCode 40）的keyup事件
      const downEvent = new KeyboardEvent('keyup', {
        keyCode: 40,
        bubbles: true,
        cancelable: true,
        key: 'ArrowDown' // 补充key属性提升兼容性
      });
      this.$refs.monthInput.dispatchEvent(downEvent);
    },
    triggerUpKey() {
      // 创建并触发上键（KeyCode 38）的keyup事件
      const upEvent = new KeyboardEvent('keyup', {
        keyCode: 38,
        bubbles: true,
        cancelable: true,
        key: 'ArrowUp' // 补充key属性提升兼容性
      });
      this.$refs.monthInput.dispatchEvent(upEvent);
    }
  }
}
</script>

注意：虽然keyCode已被标准标记为废弃，但目前绝大多数浏览器仍支持它；如果追求更标准的写法，可以用code: 'ArrowUp'/code: 'ArrowDown'代替keyCode。

方案二：直接手动修改月份值 #

这种方案更可控，完全脱离原生事件触发，通过Vue的响应式数据直接操作月份值，兼容性更好，也能自定义更多逻辑（比如限制月份范围）。

实现代码 #

<template>
  <input 
    type="month" 
    v-model="selectedMonth"
    @keyup.38.prevent="decreaseMonth"
    @keyup.40.prevent="increaseMonth"
  >
</template>

<script>
export default {
  data() {
    return {
      // 初始化选中当前年月，格式为YYYY-MM（符合input type="month"的要求）
      selectedMonth: new Date().toISOString().slice(0, 7)
    };
  },
  methods: {
    increaseMonth() {
      // 将选中的年月转为Date对象，方便操作月份
      const currentDate = new Date(`${this.selectedMonth}-01`);
      // 月份加1
      currentDate.setMonth(currentDate.getMonth() + 1);
      // 转换回YYYY-MM格式更新数据
      this.selectedMonth = currentDate.toISOString().slice(0, 7);
    },
    decreaseMonth() {
      const currentDate = new Date(`${this.selectedMonth}-01`);
      // 月份减1
      currentDate.setMonth(currentDate.getMonth() - 1);
      this.selectedMonth = currentDate.toISOString().slice(0, 7);
    }
  }
}
</script>

优势：这种方式不需要依赖浏览器的事件触发机制，逻辑完全由自己掌控，还能轻松扩展（比如添加月份最小/最大值限制）。

内容的提问来源于stack exchange，提问作者senty