业务场景：el-input 是查询关键词的搜索输入框，其绑定了失去焦点事件。 el-button是查询按钮。当点击查询按钮时，目的是执行查询操作，但出现bug，变为执行了el-input的失去焦点事件，没有执行searchHandle事件。
<el-input
ref="searchInput"
v-model="keywords"
placeholder="请输入查询内容"
clearable
@keyup.enter.native="searchHandle"
@focus="inputFocusHandle"
@blur="inputBlurHandle"
/>
<el-button type="primary" icon="el-icon-plus" @click="searchHandle">add</el-button>
思路： 在按钮上绑定的事件从@click 改为 @mousedown 事件。因为失去焦点事件是mousedown默认触发的，所以，在点击的按钮上阻止mousedown的默认事件即可
解决方案：
<el-input
ref="searchInput"
v-model="keywords"
placeholder="请输入查询内容"
clearable
@keyup.enter.native="searchHandle"
@focus="inputFocusHandle"
@blur="inputBlurHandle"
/>
<el-button type="primary" icon="el-icon-plus" @mousedown.native="searchHandle">add</el-button>
searchHandle(event){
// 即可阻止点击按钮时触发input失去焦点事件
event.preventDefault();
}
vue中使用@mousedown、@mouseenter等鼠标事件失效解决办法
当 el-input 将@click替换为@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发（也就是失效了）
解决方案：在@mouseenter、@mouseenter等鼠标事件后面加上native属性
<el-button type="primary" icon="el-icon-plus" @mousedown.native="searchBtn">add</el-button>
