iview Form Input组件按下回车键搜索和禁止触发表单默认事件

在进行表单搜索功能开发的过程中,经常会有这样的需求,要求Input输入完成以后,按下回车键进行查询。实现这个功能只需要在Input组件上增加@keyup.enter事件即可

代码如下:

javascript 复制代码
<Input v-model="searchWords" @keyup.enter="gotoSearch" placeholder="Search By: Disease name, Food name, Comopound name, Dietary Pattern, or other factors..." />

在使用iview Form 表单开发的过程中,会遇到另一种问题,在Input输入完内容后按下回车自动刷新了页面,这是触发了表单的默认提交事件,这种情况该怎么处理呢?只需要在Form组件上加上@submit.native.prevent

代码如下:

javascript 复制代码
<Form ref="formDynamicRef" :model="formDynamic"  @submit.native.prevent>
</Form>
相关推荐
D_J_Dragon6 天前
快速搭建最简单的前端项目vue+View UI Plus
前端·vue.js·view design
不cong明的亚子11 天前
记一次高版本view-design的组件迁移到自身项目的低版本
vue.js·view design·view ui
lyz24685923 天前
iview checkbox单独使用时 如何去掉显示的true和false以及不显示文字
view design
Yang_yangyang1 个月前
上传文件,文件类型限制语法,各种媒体视频文件的Content-Type
前端框架·jquery·html5·anti-design-vue·view design
lixh_man1 个月前
iview 2.x table 设置固定列后 中间留白的问题
前端·javascript·view design
前端热爱者2 个月前
vue项目使用iview☞Modal后页面不能滚动的诡异问题
前端·vue.js·view design
Э时间行者于我3 个月前
Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失
vue.js·ui·view design
代码老祖4 个月前
vue+iview tabs context-menu 弹出框怎么修改样式
前端·vue.js·view design
丰的传说5 个月前
iview中基于upload源代码组件封装更为完善的上传组件
javascript·vue·upload·iview·view design