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

Sherry Tian

于 2024-09-19 16:51:39 发布

阅读量511

点赞数 3

分类专栏： View Design 文章标签： view design

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/142364298

版权

View Design 专栏收录该内容

3 篇文章

订阅专栏

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

<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。
代码如下：

<Form ref="formDynamicRef" :model="formDynamic"  @submit.native.prevent>
</Form>