首页vue3 ts vite 使用ant design中的a-modal打开一直报错termsLibrary:1 Blocked aria-hidden on an element because its descendant retained focu

vue3 ts vite 使用ant design中的a-modal打开一直报错termsLibrary:1 Blocked aria-hidden on an element because its descendant retained focu

时间: 2025-01-15 20:23:09 浏览: 135

当你在Vue 3项目中使用TypeScript (TS) 和 Vite 框架，并尝试集成 Ant Design 的 A-Modal 功能时，遇到 "Blocked aria-hidden on an element because its descendant retained focus" 错误通常是由于A-Modal试图隐藏它的内容，但是这个内容内部有元素保持了焦点（focus），导致aria-hidden属性无法生效。解决这个问题的步骤通常包括： 1. **检查焦点管理**：确认在A-Modal显示或关闭时，是否有组件没有正确处理焦点转移。确保在模态框关闭前将焦点移除，或者提供一个合理的聚焦策略，如使用 `ref` 监听模态关闭事件并手动清除焦点。 ```javascript <template> <a-modal :visible.sync="modalVisible" @afterClose="handleAfterClose"> ... </a-modal> </template> <script lang="ts"> import { ref } from 'vue'; ... export default { setup() { const modalVisible = ref(false); const handleAfterClose = () => { // 焦点移除 document.activeElement.blur(); modalVisible.value = false; }; ... }, }; </script> ``` 2. **检查是否触发了意外的焦点事件**：确保不是由于用户交互或其他外部因素无意间激活了模态内的某个元素，这可能导致保留焦点。 3. **检查Ant Design版本兼容性**：如果问题是由于版本冲突引起，更新 Ant Design 到最新版本，看看他们是否修复了此问题。 4. **检查代码是否存在其他错误**：有可能是其他部分的代码影响了A-Modal的行为，比如循环引用或者其他潜在的问题。如果你能提供具体的代码片段和详细的错误堆栈信息，我可以给出更针对性的解决方案。

阅读全文