vue3监听键盘的单个删除和长按删除事件

html:

  <input
    type="text"
    ref="inputName"
    v-model="inputText"
    @input="listenInput"
    @keyup.enter="enterChar"
    @keydown="handleKeyDown"
    @keyup="handleKeyUp"
  />

js：

let isDeletePressed = ref(false);
let timeout = null;

function handleKeyDown(event) {
    
    
  if (event.keyCode === 8 || event.keyCode === 46) {
    
    
    if (!isDeletePressed.value) {
    
    
      isDeletePressed.value = true;
      timeout = setTimeout(() => {
    
    
        // 长按删除逻辑
        console.log("执行删除");
        deleteChar();
        isDeletePressed.value = false;
      }, 10);
    }
  }
}
function handleKeyUp() {
    
    
  if (isDeletePressed.value) {
    
    
    clearTimeout(timeout);
    // 单次删除逻辑
    deleteChar();
    isDeletePressed.value = false;
  }
}
// 删除事件
function deleteChar() {
    
    
  pingYinlist.value.splice(charIndex.value - 1, 1);
  charIndex.value--;
  pingYinlist.value = pingYinlist.value.map((a, index) => {
    
    
    a.index = index;
    return a;
  });
  nextTick(() => {
    
    
    inputName.value[0].focus();
  });
}