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

<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>

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

<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>

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')
            })
          }
        }
      }
    })
  }
}

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>