vue回车事件

vue 回车事件

需求 : 给 elementUI 的 input 框添加回车事件 , 使 input 框中输入后直接按键盘回车就能完成查询功能.

基础样式和基础代码 :

错误写法:

<el-form-item label="关键字搜索" prop="searchKey">
	<el-input v-model="formInline.searchKey" placeholder="公司编码/公司名称" 
	@keyup.enter="searchAllCompany"></el-input>
</el-form-item>
<el-form-item>
	<el-button @click="searchAllCompany" type="primary">查询</el-button>
</el-form-item>

像上面这样直接写 @keyup.enter 的话 , 你怎么按回车都不会触发事件 !

正确写法:

<el-form-item label="关键字搜索" prop="searchKey">
	<el-input v-model="formInline.searchKey" placeholder="公司编码/公司名称" 
	@keyup.enter.native="searchAllCompany"></el-input>
</el-form-item>
<el-form-item>
	<el-button @click="searchAllCompany" type="primary">查询</el-button>
</el-form-item>

像上面这样直接写 @keyup.enter.native 的话 , 即可使事件正常触发 !

小结:

如果 html 样式 是你自己用 原生 html 写的 , 那直接 写事件 即可 ;
如果 html 样式 是你用 vue 框架 里现成的 , 那 写事件时记得在事件后面添加一个 .native
因为 .native 可以给框架样式添加原生事件 . 如 :

// 原生 html 写的按钮:
<button @click="publish">修改发布</button>

// elementUI 中现成的按钮:
<el-button type="primary" @click.native="publish">修改发布</el-button>