Element ui开发常见问题记录

阻止事件冒泡

• 语法：@click.native.stop
• 比如：在表格里面有input输入功能

<t-lable
          ...
          :page-sizes="[10,20,30,50]"
          @on-all="allSubject"
          @pagination="onExamSubjectPagination"
        >
          <template #scoreValue="{scope}">
            <el-input
              v-model="scope.text"
              placeholder="请输入满分值"
              :size="$store.getters.size"
              :disabled="scope.isDisabled"
              style="width:100%;padding: 0;"
              @click.native.stop
              @input="(value) => textInput(value, scope)"
              @blur="(value) => textBlur(value, scope)"
            />
          </template>
        </t-lable>

在隐藏的标签中，有选择按钮，会提示警告

// 警告信息
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <input.el-radio__original>
Ancestor with aria-hidden: <input.el-radio__original> <input type=​"radio" aria-hidden=​"true" tabindex=​"-1" autocomplete=​"off" class=​"el-radio__original" value=​"2">​
<input type="radio" aria-hidden="true" tabindex="-1" autocomplete="off" class="el-radio__original" value="2">

• 解决方法

1. 在样式中添加

.el-radio input[aria-hidden="true"] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}