mint-ui的search組件在鍵盤顯示搜索按鈕的實現(xiàn)方法
更新時間：2017年10月27日 16:58:34 作者：蓓蕾心晴
這篇文章主要介紹了mint-ui的search組件在鍵盤顯示搜索按鈕的實現(xiàn)方法,需要的朋友可以參考下
代碼如下所示：
<form action="" target="frameFile"> <mt-search v-model="value" placeholder="請輸入關(guān)鍵字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <div class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> <iframe name='frameFile' style="display: none;"></iframe> </form>
解決辦法：
mint-ui的search組件input默認(rèn)也是type="search"類型的，但是還需要在外層包一組form標(biāo)簽，并且?guī)в衋ction,就會在鍵盤中出現(xiàn)搜索按鈕。
如上是方法一：
在手機(jī)鍵盤點(diǎn)擊搜索的時候，頁面會刷新，所以給form加一個target，target規(guī)定在何處打開 action URL，再放入一個隱藏的iframe,起名為form的target的值，這樣則在當(dāng)前頁面展示出搜索的內(nèi)容
如下是方法二：
<form action="" onsubmit="return false;"> <mt-search v-model="value" placeholder="請輸入關(guān)鍵字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <div class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> </form>
這里直接給onsubmit事件寫入return false，禁止提交，則搜索列表頁也可以在當(dāng)前頁面展示。
總結(jié)
以上所述是小編給大家介紹的mint-ui的search組件在鍵盤顯示搜索按鈕的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
如何用JS實現(xiàn)簡單的數(shù)據(jù)監(jiān)聽
這篇文章主要介紹了如何用JS實現(xiàn)簡單的數(shù)據(jù)監(jiān)聽，對數(shù)據(jù)監(jiān)聽感興趣的同學(xué)，可以參考一下2021-05-05
這篇文章主要介紹了JS動態(tài)添加iframe的代碼,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單的音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
boostrapTable的refresh和refreshOptions區(qū)別淺析
在使用bootstrapTable時，刷新數(shù)據(jù)有兩個方法refresh、refreshOptions，在其用法上有點(diǎn)區(qū)別，接下來通過本文給大家分享boostrapTable的refresh和refreshOptions的區(qū)別,需要的朋友可以參考下2017-01-01
這篇文章主要通過兩種方式介紹javascript記住用戶名和登錄密碼，有需要的小朋友可以來參考下2015-08-08
近期在做微信小程序時，涉及到了小程序的支付和退款流程，所以也大概的將這方面的東西看了一個遍，就在這篇文章里總結(jié)一下2017-11-11
JavaScript實現(xiàn)向OL列表內(nèi)動態(tài)添加LI元素的方法
這篇文章主要介紹了JavaScript實現(xiàn)向OL列表內(nèi)動態(tài)添加LI元素的方法,實例分析了javascript操作html元素的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)音樂導(dǎo)航特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家介紹了彌補(bǔ)localStorage容量缺陷的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實現(xiàn)方法
json數(shù)據(jù)在ajax實現(xiàn)異步交互時起到了很重要的作用，他可以返回請求的數(shù)據(jù)，然后利用客戶端的js進(jìn)行解析，這一點(diǎn)體現(xiàn)出js的強(qiáng)大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12