解决element ui的button没自动失焦的问题

文章不易，请关注公众号 毛毛虫的小小蜡笔，多多支持，谢谢。

问题

在实例列表页面，点击详情按钮，在打开弹窗后，大拇指习惯性的点了下空格键，发现怎么又弹窗了？

虽然从界面看不错来，但从devTool的Elements中是可以看到，有两个dialog弹窗元素。

分析

因为这个页面不是我负责，一开始以为是在click的时候，加上stop等修饰符就可以。

原来是下面这样的：

<el-button type="text" @click="showDetail(scope.row)">详情</el-button>

但加了stop等修饰符，还是不行。看来事情并不是我想的那么简单。

因为用了element ui的button，所以想着看下文档，会不会有没注意到的说明。

一眼看完，没有特别的相关说明。

然后回到页面继续测试，发现打开弹窗后，点击空格键，发现“详情”的字好像闪了一下。
多测试几次，发现问题了。

原来打开弹窗后，button没有失焦，所以这时候点击空格键，就会再次触发button的click事件，从而再次打开弹窗。
说明一下，这里再次打开弹窗，是因为代码没判断是否已打开弹窗的逻辑。这个可以先忽略。毕竟这里探讨的是失焦问题。

解决方案

使元素失焦，一般是通过blur事件。

详情 请查看：毛毛虫的小小蜡笔