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>
相关推荐
장숙혜2 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang5 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端8 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_11 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia11 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia20 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia27 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu27 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙1 小时前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX1 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue