vue自定义指令：清除el-radio控制台警告

每次点击radio时，控制台都会打印一条警告信息

指令：

Vue.directive('removeAriaHidden', {
  inserted(el) {
    // 初次处理
    removeAriaHidden(el)

    // 观察子元素变动
    const observer = new MutationObserver(() => {
      // 当子元素变化时，再次处理
      removeAriaHidden(el)
    })

    // 配置监听范围：观察子节点树的变化
    observer.observe(el, { childList: true, subtree: true })

    // 在 el 元素上保存观察器，方便解绑
    el.__mutationObserver__ = observer
  },
  unbind(el) {
    // 清理观察器
    if (el.__mutationObserver__) {
      el.__mutationObserver__.disconnect()
      delete el.__mutationObserver__
    }
  },
})

// 提取公共的行为函数
function removeAriaHidden(el) {
  const ariaEls = el.querySelectorAll('.el-radio__original')
  ariaEls.forEach((item) => {
    if (item.hasAttribute('aria-hidden')) {
      item.removeAttribute('aria-hidden')
    }
  })
}

使用：

                    <el-radio-group
                      v-model="option.optionStatus"
                      v-removeAriaHidden
                    >
                      <el-radio :label="1">合格</el-radio>
                      <el-radio :label="2">不合格</el-radio>
                      <el-radio :label="3">不适用</el-radio>
                    </el-radio-group>

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~