黄子涵

查漏补缺——说说@keyup.enter

问题

如题所示

答案

vue中输入框事件的使用——@input、@keyup.enter、@change、@blur

相关源码如下:

<div class="header-search">
        <i class="iconfont iconsearch" @click.stop="click"></i>
        <input ref="searchInput" :class="{'show':show}" v-model="searchValue" type="text" @click.stop="" @keyup.enter="search"/>
    </div>
search(){
                // console.log(this.searchValue)
                this.$router.push({name:'search',params:{words:this.searchValue}});
                this.close()
            }

按照上面的源码,在输入框输入的时候,就调用search这个函数,这个函数的作用应该是将输入框输入的文字和search这个路由重新拼接成一个新的地址(url)

大致做成来的效果是这样的:

image

posted @ 2022-06-23 22:25  黄子涵  阅读(72)  评论(0)    收藏  举报