报错问题:
<input> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor.
解决思路:
- aria-hidden属性是一个用于指示元素是否对屏幕阅读器等辅助技术隐藏的属性。
- 去除aria-hidden属性
- 在mounted生命周期获取到带有aria-hidden属性的元素
- 然后删除aria-hidden属性
代码:
<template>
<el-from>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group ref="radio" v-model="resource">
<el-radio :label="1">自动获取</el-radio>
<el-radio :label="2">表格导入</el-radio>
</el-radio-group>
</el-form-item>
</el-from>
</template>
<script>
mounted () {
// 获取到带有aria-hidden属性的元素
const ariaEls = this.$refs.radio.$el.querySelectorAll('input[type="radio"]')
if (!ariaEls) return
ariaEls.forEach((item) => {
// aria-hidden属性
item.removeAttribute('aria-hidden');
});
},
</script>