回车触发elementUI表单查询

elementUI极大的方便了我们的开发，但是偶尔特殊的需求还是会让人头疼。

前段时间接到过这样一个需求，使用回车来查询事件。一般来说回车事件只会绑定在输入框里面。只需要做简单的绑定@keydown.enter就好。然而，需求永远都是复杂的。希望下拉框或者时间选择器之类的选完之后也可以回车查询。

这里用一个页面来测试下。

image.png

如图所示这里有一个下拉框和一个日期选择器。代码结构如下

然后在父级元素上绑定按键的事件

   mounted(){
            document.getElementById('app').addEventListener('keydown',function () {
                alert('按键触发')
            })
        }

screenshot.gif

可以看到下拉框可以选择触发事件，而日期选择器不能，分析原理，绑定在最外层app的事件传递到了下面，而按键事件只能触发在可聚焦元素。下拉框选中之后依然聚焦在输入框，日期选择器则相反。
同时，可以注意到下拉框在focus的情况下，回车会切换下拉项的展开与收起，这样会影响操作流畅性。

于是有了这样一个思路，在进行下拉或者日期选择操作之后focus到外层div，当然不是所有元素都能focus，为了让普通div也能focus，这里需要添加一个属性。

关于tabindex的具体用法可以查文档，这里就不多赘述了。

screenshot1.gif

这里可以看到，整个div都能focus了，也可以触发相应的事件。那么我们去查看element组件的相应事件来处理。最后针对聚焦后的蓝色边框进行样式处理，就得到了我们想要的效果了。

screenshot2.gif

完整代码如下

当然，vue等框架的出现是让我们尽量少操作dom，但是这种特殊的需求下我没有想到合适的框架实现方式，如果有大神看到，希望不吝赐教。