本文旨在解决 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'.
Property 'ariaHidden' does not exist on type 'ElementAttrs'. Did you mean ''aria-hidden''? 这个错误表明 TypeScript 编译器无法识别 ariaHidden 属性。虽然你可能已经使用了正确的属性名称 aria-hidden，但仍然出现错误。
立即学习“前端免费学习笔记（深入）”；
问题根源：Volar 扩展版本
这个问题通常是由 Vue Language Features (Volar) 扩展的特定版本引起的，特别是 0.36 及之后的版本。该版本的类型检查可能存在一些问题，导致无法正确识别某些 HTML 属性。
解决方案：
针对这个问题，目前有两种主要的解决方案：
1. 降级 Volar 扩展：
这是最直接的解决方案。你可以将 Volar 扩展降级到之前的版本，例如 0.35。
-
操作步骤：
- 在 VS Code 中，打开扩展面板 (Ctrl+Shift+X 或 Cmd+Shift+X)。
- 找到 "Vue Language Features (Volar)" 扩展。
- 点击扩展条目右侧的向下箭头，选择 "安装另一个版本..."。
- 选择一个较低的版本，例如 0.35。
- 重启 VS Code。
降级后，重新编译你的 Vue 项目，错误应该会消失。
2. 等待官方修复更新：
Volar 扩展的开发者通常会积极修复已知问题。你可以关注 Volar 扩展的更新日志，等待官方发布包含此问题修复的新版本。一旦新版本发布，更新 Volar 扩展即可解决问题。
示例代码：
以下是一个使用 aria-hidden 属性的示例：
This is an alert message.
在这个例子中，aria-hidden="true" 属性用于指示屏幕阅读器忽略 元素，因为它的内容 (×) 只是一个关闭按钮的视觉装饰。
注意事项：
- 降级 Volar 扩展只是一个临时解决方案。建议在官方发布修复版本后，及时更新到最新版本。
- 确保你的 Vue 项目的 TypeScript 配置正确，例如 tsconfig.json 文件中包含了必要的类型定义。
总结：
当你在 Vue.js 项目中使用 aria-hidden 或 data-dismiss 属性遇到类型错误时，首先应该考虑 Volar 扩展的版本问题。通过降级 Volar 扩展或等待官方修复更新，可以有效地解决这个问题，保证项目的正常运行和可访问性。记住，保持你的开发工具和依赖项更新到最新版本，能够帮助你避免许多潜在的问题。
