美文网首页
VUE项目,搜索页面监听按下enter键实现搜索功能

VUE项目,搜索页面监听按下enter键实现搜索功能

作者: ForeverYoung_06 | 来源:发表于2019-11-13 16:25 被阅读0次

    vue项目,搜索框输入搜索内容,按下搜索按钮跳转到搜索页面,携带过去参数,搜索页面接受参数,传递给接口,根据搜索类型不同,展现不同内容。

    若输入搜索内容并选择搜索类型后,没有按下按钮搜索,而是习惯性按下enter键,可在input上监听keyup.enter事件,当enter键按下,调用和按下搜索按钮同样的事件即可。

    
        <input @keyup.enter="search" placeholder="搜索商品/店铺" v-model="keywords" class="search-ipt" type="text" />
    
        <button class="float-right" @click="search">搜索</button>
    
    
    

    饿了么组件el-input中也有相应事件

    
    <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input>
    
    
    

    vue官网


    vueImage.png

    链接:https://www.jb51.net/article/146245.htm

    linkImage.png

    你的编译器报错行数比代码还多吗?

    相关文章

      网友评论

          本文标题:VUE项目,搜索页面监听按下enter键实现搜索功能

          本文链接:https://www.haomeiwen.com/subject/bxfkictx.html