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>
  • 18
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值