键盘事件的清除

生命周期结束时清除键盘事件

易错： 未刷新页面情况，每触发键盘事件触发的次数都会进行累加。

• 组件：

<script setup>
// 1.0 注册；
  onMounted(() => {
    console.log('注册');
    keyDownRegistr();
  })
// 1.1 注销；
  onUnmounted(()=>{
    console.log('注销');
    removeEventHandler();
    
  })
// 1.2 监听键盘按下的注册事件；
const keyDownRegistr = () => {
  document.addEventListener('keydown', keyDownHnadler);
};
// 1.3 移除键盘按下的事件的监听事件；
const removeEventHandler = () => {
  document.removeEventListener('keydown', keyDownHnadler);
};
const keyDownHnadler = () => {
  if (event.key === 'ArrowUp' || event.keyCode === 38) { // 向上箭头键
    if(selectTrIndex.value > 0){
      selectTrIndex.value-=1; // 选中的索引号 - 1
      console.log('向上');
    }
    else{
      selectTrIndex.value=MoCodeDate.value.length-1;
    }
  }
  if (event.key === 'ArrowDown' || event.keyCode === 40) { // 向下箭头键
    if(selectTrIndex.value < MoCodeDate.value.length-1){
      selectTrIndex.value+=1;  // 选中的索引号 + 1
      console.log('向下');
    }
    else{
      selectTrIndex.value=0;
    }
  }
  if (event.key === 'enter' || event.key === 'Enter' || event.key === 'NumpadEnter') { // 回车键
    //if(MoCodeDate.value.length>0){
      props.a && props.a(MoCodeDate.value[selectTrIndex.value]);
  }
  find(selectTrIndex.value);
};

</script>