Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be hi

最近之前写的Vue2+element-ui项目在操作单选框时突然控制台报错：

这个错误在以前是没有的，近端时间才有的，最开始也只有谷歌浏览器有这个报错，edge没有的，现在浏览器都有这个报错了，但是这不是代码本身的错误，也不影响代码的功能，应该是浏览器的什么协议更新导致的。

虽然不影响代码功能，但是控制台一直报错很难看，可以使用一个全局指令针对element-ui的单选组件el-radio-group做出处理。

在main.js中写一个全局指令：

//引入全局指令消除element-ui单选组件el-radio-group 的报错问题
Vue.directive('removeHidden', {
  bind(el) {
     // 查找所有匹配的元素
    let ariaEl = el.querySelectorAll('.el-radio__original[aria-hidden]');
    ariaEl.forEach((item) => {
      // 移除 aria-hidden 属性
      item.removeAttribute('aria-hidden');
    });
  }
});

在使用单选组件el-radio-group的地方添加上指令：

         <div>
          <el-radio-group v-remove-hidden v-model="sightseeingChoose">
            <el-radio label="小型" :disabled="isSightseeDisabledPhase('小型')"
              >小型</el-radio
            >
            <el-radio label="中型" :disabled="isSightseeDisabledPhase('中型')"
              >中型</el-radio
            >
            <el-radio label="大型" :disabled="isSightseeDisabledPhase('大型')"
              >大型</el-radio
            >
          </el-radio-group>
        </div>

这样控制台就没有报错了，原理就是移除  aria-hidden 报错属性，因为这个属性是后来运行过程中 给标签自动添加上去的，与实际功能无关，移除后不影响功能，也能解决报错问题。