Nuxt UI 中 USelectMenu 组件禁用项可选的 Bug 分析

问题背景

在 Nuxt UI 框架的 3.0.0-beta.2 版本中，开发者报告了一个关于 USelectMenu 组件的功能性问题。该组件是 Vue 3 生态中常用的下拉选择菜单组件，但在特定情况下会出现禁用项仍然可以被选择的问题。

问题现象

当开发者使用 USelectMenu 组件时，即使为某些选项设置了 disabled: true 属性，这些被禁用的选项仍然可以被用户选中。这与预期的组件行为不符，因为按照常规交互设计，禁用项应该显示为灰色且不可交互。

技术分析

从问题描述来看，这个 Bug 出现在 Vue 3 环境下，与 Nuxt 框架版本无关。核心问题在于 USelectMenu 组件对禁用状态的处理逻辑存在缺陷。

在 Vue 组件开发中，禁用状态通常需要同时在 UI 渲染和事件处理两个层面进行控制：

1. 视觉层面：通过 CSS 样式显示为禁用状态
2. 交互层面：阻止点击等交互事件

USelectMenu 组件当前可能只实现了视觉层面的禁用效果，而缺少了对交互事件的拦截逻辑。

影响范围

这个 Bug 会影响所有使用 USelectMenu 组件并需要禁用某些选项的场景，特别是在以下情况：

• 表单中部分选项暂时不可用
• 根据用户权限动态禁用某些选项
• 数据加载完成前禁用所有选项

临时解决方案

在官方修复发布前，开发者可以采用以下临时解决方案：

1. 在 change 事件中手动过滤禁用项：

function handleChange(value) {
  const selectedItem = items.value.find(item => item.value === value);
  if (selectedItem?.disabled) {
    // 重置为之前的值或空值
    medication.medicationId = null;
    return;
  }
  // 正常处理
}

2. 使用计算属性过滤掉禁用项：

const enabledItems = computed(() => 
  $getProducts.data.value
    ?.filter(item => !item.disabled)
    ?.map(item => ({
      label: item.nome,
      value: item.id_produto
    }))
);

最佳实践建议

在使用类似的选择菜单组件时，建议：

1. 始终测试禁用状态的实际效果
2. 对于关键业务场景，添加额外的验证逻辑
3. 关注组件库的更新日志，及时升级修复版本

总结

这个 Bug 虽然看起来简单，但在表单交互中可能造成数据不一致的问题。开发者在使用时应当注意验证禁用功能的实际效果，特别是在生产环境中。组件库的维护者已在后续版本中修复了这个问题，建议用户升级到最新稳定版本以获得最佳体验。