解决elementui中el-radio报错：Blocked aria-hidden on an element because its descendant retained focus.

今天写elementUi时，点击el-radio时，报如下错误：

经过分析，是由于radio上面的aria-hidden属性在作妖。

解决思路是，直接去掉这个属性

//在项目的main.js 定义一个自定义指令

Vue.directive('removeAriaHidden', {
  bind(el, binding) {
    const ariaEls = el.querySelectorAll('.el-radio__original')
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden')
    })
  }
})

//然后在对应的标签上，补充指令，v-removeAriaHidden

<el-radio-group v-model="addInfo.type" class="input" v-removeAriaHidden>
         <el-radio v-for="item in typeList" :label="item" :key="item">{{ item }}</el-radio>
</el-radio-group>

正常上面的就能搞定，但是我又遇另外的情况

上述的 el-radio 里面的 typeList 是从远程接口获取，这时，自定义指令好像没反应，上面的问题依旧在。

此处考验自定义指令的使用了，Vue 自定义指令的钩子函数主要包括：bind, inserted, update, componentUpdated, unbind。

Vue.directive('my-directive', {
  // 当绑定指令到元素上时
  bind(el, binding, vnode, oldVnode) {
    // 在这里可以进行一次性的初始化设置
    console.log('The directive is bound!');
  },
  // 当被绑定元素插入到 DOM 中时
  inserted(el, binding, vnode, oldVnode) {
    // 在这里可以进行 DOM 操作
    console.log('The element is inserted!');
  },
  // 当 VNode 更新时
  update(el, binding, vnode, oldVnode) {
    // 在这里可以响应数据的变化
    console.log('The bound element has been updated!');
  },
  // 当 VNode 及其子 VNode 全部更新后
  componentUpdated(el, binding, vnode, oldVnode) {
    // 在这里可以执行依赖于组件 VNode 更新的操作
    console.log('The component has been updated!');
  },
  // 当指令与元素解绑时
  unbind(el, binding, vnode, oldVnode) {
    // 在这里可以执行一些清理工作
    console.log('The directive has been unbound!');
  }
});

改写原有的自定义指令

Vue.directive('removeAriaHidden', {
  // 当绑定指令到元素上时
  bind(el, binding) {
    const ariaEls = el.querySelectorAll('.el-radio__original')
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden')
    })
  },
  // 当 VNode 更新时
  update(el, binding) {
    const ariaEls = el.querySelectorAll('.el-radio__original')
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden')
    })
  }
})

刷新，测试，问题解决。

应该还有其他的解决办法，好像是利用css解决。欢迎指正