赞
踩
1,我们使用element-ui的单选框radio,点击的时候报错如下图的错,究其原因是访问ibility问题:这个错误可能是因为HTML元素<input>
上的aria-hidden
属性被错误地使用了。aria-hidden
属性是一个用于指示元素是否对屏幕阅读器等辅助技术隐藏的属性。如果一个<input>
元素被设置为aria-hidden="true"
,这可能违反了无障碍性web的最佳实践,因为屏幕阅读器用户依赖这类元素来理解应用的结构和内容
2.解决方案一(生命周期里面修改)
- <el-radio-group
- v-model="formData.dimension"
- @input="changeHandle"
- ref="radio"
- >
- <el-radio :label="1">同一报告</el-radio>
- <el-radio :label="2">同一就诊</el-radio>
- <el-radio :label="3">同一患者</el-radio>
- </el-radio-group>
-
-
-
- mounted() {
- this.$refs.radio.$children.forEach((item) => {
- item.$refs.radio.removeAttribute("aria-hidden");
- });
- }
3.解决方案二(注册指令)
- export default {
- bind(el, binding) {
- // 获取节点
- let ariaEls = el.querySelectorAll(".el-radio__original");
- ariaEls.forEach((item) => {
- item.removeAttribute("aria-hidden");
- });
- }
- };
- import Vue from "vue";
- import removeAria from "./moudle/removeAria";
-
- //全局注册
- Vue.directive("removeAria", removeAria);
- Vue.use(rightmenu);
- <!--使用指令-->
- <el-radio-group
- v-model="formData.radio"
- @input="changeHandle"
- ref="radio2"
- v-removeAria
- >
- <el-radio :label="'1'"> 条件树设置 </el-radio>
- <el-radio :label="'2'"> 满足所有变量 </el-radio>
- <el-radio :label="'3'"> 满足任意变量 </el-radio>
- </el-radio-group>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。