首先介绍一下需求点：

• 点击日期组件能够选中日期
• 选中后能够回车进行搜索
• 点击删除图标依然能够聚焦到日期组件

具体做法

说明：这里仅讨论vue中的用法；

1. 事件生效
   如果作为新手，第一反应就是给组件加上**@keydown.enter**，但会发现并不生效，这是因为组件本身不具备该事件，正确做法是给事件加上native
   

@keydown.enter.native="handleEnterClick"

2. 捕获组件回车事件，响应自定义回车事件
   无论是element UI还是iview UI，会发现datepicker自带回车功能，作用是用于选中日期。通过阅读组件的源码，我们会发现其实是组件封装了keydown方法，因此我们要做的就是在捕获阶段就获取组件事件，让我们的方法优于组件事件的发生，具体如下：

@keydown.enter.capture.native="(e) => {
    handleEnterClick();
    e.stopPropagation();
}"

3.重新获取焦点

点击删除时会失去焦点，这是因为组件设置了删除后立即失去焦点，因此我们要做的就是获取焦点重新回到组件本身，具体如下：

@on-clear="$refs.datepicker.focus()" // datepicker是我们给组件加的ref属性

至此，大功告成！