vue3 前端笔记2

1 禁止键盘输入

<el-table-column label="商品编码" prop="skuNo" align="center" :min-width="150">
  <template #default="scope">
    <el-input v-model.trim="scope.row.skuNo" 
    @keypress="handleProductCodeKeypress"
    style="width: 100%;" type="textarea" :maxlength="30" show-word-limit :rows="1" />
  </template>
</el-table-column>

// 输入框禁止输入小数点
function handleProductCodeKeypress(event) {
  // 阻止小数点输入
  if (event.key === '.') {
    event.preventDefault();
  }
}

2 子组件快捷键

// 组件挂载时添加键盘事件监听
onMounted(() => {
  document.addEventListener('keydown', handleKeydown);
});

// 组件卸载时移除键盘事件监听
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});

// 键盘事件处理函数
const handleKeydown = (event) => {
  // 只在对话框打开且监听器激活时处理键盘事件
  if (!holdOrderDialog.value || !isKeyboardListenerActive.value) return;
  
  // 阻止事件冒泡，避免影响父组件
  event.stopPropagation();
  
  switch(event.key) {
    case 'ArrowUp':
      event.preventDefault();
      navigateUp();
      break;
    case 'ArrowDown':
      event.preventDefault();
      navigateDown();
      break;
    case 'Enter':
      event.preventDefault();
      confirmSelection();
      break;
  }
};

const holdOrderDialog = ref(false) // 挂单窗口状态
const isKeyboardListenerActive = ref(false) // 标记键盘监听器是否激活

// 1 打开挂单对话框
const openHoldOrderDialog = () => {
  console.log("打开挂单对话框.....");
  holdOrderDialog.value = true;
  // 获取挂单列表
  fetchHoldOrders();
};

watch(holdOrderDialog, (newVal) => {
  if (newVal) {
    // 对话框打开时，确保键盘监听器在下次tick激活
    nextTick(() => {
      isKeyboardListenerActive.value = true;
    });
  } else {
    // 对话框关闭时，立即停用键盘监听
    isKeyboardListenerActive.value = false;
  }
});


defineExpose({ openHoldOrderDialog });