el-radio 点击报错 Element with focus: inputAncestor with aria-hidden....

一、序言

浏览器版本影响的问题(与代码无关,可能是web或浏览器相关协议更新导致),不影响功能的使用.

翻译:元素上的Blocked aria-hidden,因为刚刚接收焦点的元素不能对辅助技术用户隐藏。避免在焦点元素或其祖先元素上使用aria-hidden。考虑使用惰性属性,这也会阻止焦点。有关更多详细信息,请参见 WAI-ARIA规范 的aria隐藏部分。

二、配置全局方法 main.js

复制代码
// 解决el-radio报错
Vue.directive('removeAriaHidden', {
  bind(el, binding) {
    let ariaEls = el.querySelectorAll('.el-radio__original');
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden');
    });
  }
});

三、使用

复制代码
<el-raido v-model="radio" v-removeAriaHidden></el-radio>

<el-radio-group v-model="radio" v-removeAriaHidden >
     <el-radio :label="1" >1</el-radio>
     <el-radio :label="2">2</el-radio>
 </el-radio-group>
相关推荐
爱上妖精的尾巴1 分钟前
7-13 WPS JS宏 this 用构造函数自定义类-2,调用内部对象必须用this
开发语言·javascript·wps·jsa
一 乐17 分钟前
学生宿舍管理|基于springboot + vue学生宿舍管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·助农电商系统
一人の梅雨18 分钟前
义乌购商品详情接口进阶实战:批发场景下的精准解析与高可用架构
java·服务器·前端
bin915322 分钟前
(文后附完整代码)html+css+javascript 弓箭射击游戏项目分析
前端·javascript·css·游戏·html·前端开发
翱翔的苍鹰30 分钟前
完整的“RNN + jieba 中文情感分析”项目的Gradio Web 演示的简单项目
前端·人工智能·rnn
有味道的男人1 小时前
如何使用招标网API获取项目详情?
java·服务器·前端
qq_406176141 小时前
深入剖析JS中的XSS与CSRF漏洞:原理、攻击与防御全指南
服务器·开发语言·前端·javascript
RFCEO1 小时前
HTML编程 课程六、:HTML5 新增多媒体标签
前端·html·html5·多媒体标签·嵌入音频、视频、动画
yanyu-yaya1 小时前
速学兼复习之vue3章节4
前端·vue.js·前端框架
Mr-Wanter1 小时前
vue 数据反显时数字/字母不换行导致的样式问题
前端·javascript·vue.js