vue.js項(xiàng)目 el-input 組件 監(jiān)聽(tīng)回車(chē)鍵實(shí)現(xiàn)搜索功能示例
基于element-ui 組件 開(kāi)發(fā)的vue.js項(xiàng)目， 實(shí)現(xiàn)回車(chē)鍵發(fā)起搜索，和原生的input 標(biāo)簽使用方法不一樣：
el-input 監(jiān)聽(tīng)鍵盤(pán)按下?tīng)顟B(tài) 得用@keyup.enter.native,如果是非el-input 組件，可以直接用@keyup.enter
<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input> <input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">
在methods方法集里，寫(xiě)上監(jiān)聽(tīng)的方法，當(dāng)獲取的keyCode 為13時(shí)，表示按下了回車(chē)鍵，如果需要監(jiān)聽(tīng)空格或者其他鍵，換成別的鍵值
searchEnterFun:function(e){
var keyCode = window.event? e.keyCode:e.which;
// console.log('回車(chē)搜索',keyCode,e);
if(keyCode == 13 && this.input){
this.$router.push({path:'/Share?keywords='+this.input});
}
}
which 和 keyCode 屬性提供了解決瀏覽器的兼容性的方法。
keyCode屬性返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼
注意：
在 Firefox 中，keyCode 屬性在 onkeypress 事件中是無(wú)效的 (返回 0)。瀏覽器兼容問(wèn)題，可以一起使用 which 和 keyCode 屬性來(lái)解決：
var keyCode = window.event ? e.keyCode:e.which;
which 屬性返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼
瀏覽器支持：谷歌、火狐、ie9、safari、歐朋
以上這篇vue.js項(xiàng)目 el-input 組件 監(jiān)聽(tīng)回車(chē)鍵實(shí)現(xiàn)搜索功能示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch，為大家詳細(xì)講解計(jì)算屬性computed與$watch，感興趣的小伙伴們可以參考一下2016-09-09
vue3如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)
這篇文章主要給大家介紹了關(guān)于vue3如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的相關(guān)資料,在vue中實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)和原生js無(wú)太大差異,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開(kāi)始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新
這篇文章主要為大家詳細(xì)介紹了vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue-Cli 3.0 中配置高德地圖的兩種方式，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了如何處理elementUI中表格多選框禁用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本，隨著思路的展開(kāi)我們就來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友可以參考下2023-10-10
Vue3中v-if和v-for優(yōu)先級(jí)實(shí)例詳解
Vue.js中使用最多的兩個(gè)指令就是v-if和v-for,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-if和v-for優(yōu)先級(jí)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09