el-button点击后不自动失焦,手动失焦
ElementUI中Button按钮的实际渲染出的DOM节点如下面的代码所示,如果我们点击button,即nodeName == "BUTTON",则直接使用event.target.blur();如果我们点击到button组件上的文字也就是span标签上时,即nodeName == "SPAN",直接使用event.target.blur()不会生效,要对其父元素使用才能生效,即使用event.target.parentNode.blur()
<button class="el-button el-button--default" type="button">
<!--v-if-->
<!--v-if-->
<span>测试</span>
</button>
具体实现代码如下:
<el-button @click.prevent="handleClick($event)" type="primary">按钮</el-button>
handleClick(event) {
event.target.blur();
if(event.target.nodeName == "SPAN") {
event.target.parentNode.blur();
}
}