解决el-radio-group中的area-hidden报错

一、抛出问题：

在使用nuxt2 + element UI开发时，使用了el-radio-group组件，当点击radio时报错，如下：

二、问题分析

Element UI 的 el-radio 组件默认会将原生的 元素隐藏，用

或 模拟可视化样式。若需操作原生 input 元素，需通过组件 DOM 结构查找。

三、解决方法：

方法一：(vue2 和 vue3都适用)

<template>
  <el-radio-group v-model="selectedValue" ref="radioGroup">
    <el-radio :label="1">选项1</el-radio>
    <el-radio :label="2">选项2</el-radio>
    <el-radio :label="3">选项3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 1
    };
  },
  mounted() {
    // 确保 DOM 已渲染完成
    this.$nextTick(() => {
      this.setInputAriaHidden();
    });
  },
  methods: {
    setInputAriaHidden() {
      // 获取 el-radio-group 下所有 input 元素
      const inputs = this.$refs.radioGroup.$el.querySelectorAll('input[type="radio"]');
      inputs.forEach(input => {
        input.setAttribute('aria-hidden', 'false');
      });
    }
  }
};
</script>

关键步骤说明

1. 添加 ref 引用
   在 el-radio-group 上添加 ref="radioGroup"，以便通过 Vue 实例访问 DOM。
2. 等待 DOM 渲染完成
   在 mounted 生命周期钩子中使用 this.$nextTick()，确保组件渲染完毕后再操作 DOM。
3. 查找所有 input 元素
   通过 querySelectorAll 选择 el-radio-group 内所有类型为 radio 的 input 元素。
4. 设置 aria-hidden 属性
   遍历每个 input 元素，通过 setAttribute 修改其 aria-hidden 属性。

若 el-radio-group 的内容是动态生成的，需在数据更新后重新调用setInputAriaHidden:

watch: {
  dynamicOptions() {
    this.$nextTick(this.setInputAriaHidden);
  }
}

方法二：

因为使用nuxt，所以在nuxt中可修改如下：

<template>
  <el-radio-group v-model="selectedValue" ref="radioGroupRef">
    <el-radio v-for="option in options" :key="option.value" :label="option.value">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 1,
      options: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' },
        { value: 3, label: '选项3' }
      ]
    }
  },
  watch: {
    options: {
    	handler() {
      	this.$nextTick(this.setInputAriaHidden)
    	},
      deep: true
    }
  },
  mounted() {
    // 确保在客户端执行且 DOM 已渲染
    if (process.client) {
      this.$nextTick(() => {
        this.setInputAriaHidden()
      })
    }
  },
  methods: {
    setInputAriaHidden() {
      const radioGroup = this.$refs.radioGroupRef?.$el
      if (!radioGroup) return

      // 获取所有原生 input 元素
      const inputs = radioGroup.querySelectorAll('input[type="radio"]')
      inputs.forEach(input => {
        input.setAttribute('aria-hidden', 'false')
      })
    }
  }
}
</script>

四、优化：可以将方法进行全局处理：

思路：通过 Nuxt 插件 + 全局混入（Mixin） 的方式，在所有 el-radio-group 组件挂载时自动操作其 DOM:

1. 创建 Nuxt 插件文件

在 plugins/ 目录下新建文件 element-aria-global.js：

export default function (context) {
  if (process.client) { // 仅客户端执行
    const Vue = context.app

    // 全局混入
    Vue.mixin({
      mounted() {
        // 检查当前组件是否为 el-radio-group
        if (this.$options.name === 'ElRadioGroup') {
          this.$nextTick(() => {
            this.setInputAriaHidden()
          })
        }
      },
    // 如果需要支持动态生成的 el-radio（如异步数据），扩展 updated 生命周期：
     updated() {
        if (this.$options.name === 'ElRadioGroup') {
          this.$nextTick(() => {
            this.setInputAriaHidden()
          })
        }
      },
      methods: {
        setInputAriaHidden() {
          const inputs = this.$el?.querySelectorAll('input[type="radio"]')
          if (inputs) {
            inputs.forEach(input => {
              input.setAttribute('aria-hidden', 'false')
            })
          }
        }
      }
    })
  }
}

2. 配置 Nuxt 插件

在 nuxt.config.js 中添加插件配置（确保在 Element UI 插件之后加载）：

export default {
  plugins: [
    '~/plugins/element-aria-global.js' // 添加此行
  ],
  // 若使用 @nuxtjs/element-ui 模块
  modules: [
    '@nuxtjs/element-ui'
  ],
  elementUI: {
    components: ['RadioGroup', 'Radio'] // 按需引入
  }
}

五、替代方案：自定义指令：

指令封装：

// plugins/directive-aria.js
export default function (context) {
  if (process.client) {
    const Vue = context.app

    Vue.directive('aria-radio', {
      inserted(el) {
        const inputs = el.querySelectorAll('input[type="radio"]')
        inputs.forEach(input => {
          input.setAttribute('aria-hidden', 'false')
        })
      }
    })
  }
}

组件中使用：

<template>
  <el-radio-group v-model="value" v-aria-radio>
    <!-- 选项 -->
  </el-radio-group>
</template>