使用 Vue.js 时 ariaHidden 属性报错的解决方案

本文旨在解决 Vue.js 项目中使用 ariaHidden 或 data-dismiss 属性时，由于 Volar 扩展版本问题导致的类型错误。通过降级 Volar 扩展或等待官方修复更新，可以有效规避此问题，确保项目正常运行。

在使用 Vue.js 开发 Web 应用时，为了提升应用的可访问性（Accessibility），我们经常会用到 aria-hidden 属性来告知辅助技术（如屏幕阅读器）是否应该忽略某个元素。此外，data-dismiss 属性也常用于 Bootstrap 等 UI 框架中，控制元素的关闭行为。

然而，在某些情况下，你可能会遇到类似如下的错误提示：

Type '{ ariaHidden: string; "aria-hidden": "true"; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.   Property 'ariaHidden' does not exist on type 'ElementAttrs<HTMLAttributes>'. Did you mean ''aria-hidden''?

这个错误表明 TypeScript 编译器无法识别 ariaHidden 属性。虽然你可能已经使用了正确的属性名称 aria-hidden，但仍然出现错误。

问题根源：Volar 扩展版本

这个问题通常是由 Vue Language Features (Volar) 扩展的特定版本引起的，特别是 0.36 及之后的版本。该版本的类型检查可能存在一些问题，导致无法正确识别某些 HTML 属性。

解决方案：

针对这个问题，目前有两种主要的解决方案：

1. 降级 Volar 扩展：

这是最直接的解决方案。你可以将 Volar 扩展降级到之前的版本，例如 0.35。

• 操作步骤：
  1. 在 VS Code 中，打开扩展面板 (Ctrl+Shift+X 或 Cmd+Shift+X)。
  2. 找到 “Vue Language Features (Volar)” 扩展。
  3. 点击扩展条目右侧的向下箭头，选择 “安装另一个版本…”。
  4. 选择一个较低的版本，例如 0.35。
  5. 重启 VS Code。

降级后，重新编译你的 Vue 项目，错误应该会消失。

2. 等待官方修复更新：

Volar 扩展的开发者通常会积极修复已知问题。你可以关注 Volar 扩展的更新日志，等待官方发布包含此问题修复的新版本。一旦新版本发布，更新 Volar 扩展即可解决问题。

示例代码：

以下是一个使用 aria-hidden 属性的示例：

<template>   <div>     <button type="button" class="close" data-dismiss="alert" aria-label="Close">       <span aria-hidden="true">&times;</span>     </button>     <p>This is an alert message.</p>   </div> </template>

在这个例子中，aria-hidden=”true” 属性用于指示屏幕阅读器忽略 元素，因为它的内容 (×) 只是一个关闭按钮的视觉装饰。

注意事项：

• 降级 Volar 扩展只是一个临时解决方案。建议在官方发布修复版本后，及时更新到最新版本。
• 确保你的 Vue 项目的 TypeScript 配置正确，例如 tsconfig.json 文件中包含了必要的类型定义。

总结：

当你在 Vue.js 项目中使用 aria-hidden 或 data-dismiss 属性遇到类型错误时，首先应该考虑 Volar 扩展的版本问题。通过降级 Volar 扩展或等待官方修复更新，可以有效地解决这个问题，保证项目的正常运行和可访问性。记住，保持你的开发工具和依赖项更新到最新版本，能够帮助你避免许多潜在的问题。