mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法

更新時(shí)間：2017年10月27日 16:58:34 作者：蓓蕾心晴

這篇文章主要介紹了mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(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,就會(huì)在鍵盤中出現(xiàn)搜索按鈕。

如上是方法一：

在手機(jī)鍵盤點(diǎn)擊搜索的時(shí)候，頁面會(huì)刷新，所以給form加一個(gè)target，target規(guī)定在何處打開 action URL，再放入一個(gè)隱藏的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組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

如何用JS實(shí)現(xiàn)簡單的數(shù)據(jù)監(jiān)聽
這篇文章主要介紹了如何用JS實(shí)現(xiàn)簡單的數(shù)據(jù)監(jiān)聽，對數(shù)據(jù)監(jiān)聽感興趣的同學(xué)，可以參考一下
2021-05-05
JS動(dòng)態(tài)添加iframe的代碼
這篇文章主要介紹了JS動(dòng)態(tài)添加iframe的代碼,需要的朋友可以參考下
2015-09-09
JavaScript實(shí)現(xiàn)簡單的音樂播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
boostrapTable的refresh和refreshOptions區(qū)別淺析
在使用bootstrapTable時(shí)，刷新數(shù)據(jù)有兩個(gè)方法refresh、refreshOptions，在其用法上有點(diǎn)區(qū)別，接下來通過本文給大家分享boostrapTable的refresh和refreshOptions的區(qū)別,需要的朋友可以參考下
2017-01-01
javascript記住用戶名和登錄密碼（兩種方式）
這篇文章主要通過兩種方式介紹javascript記住用戶名和登錄密碼，有需要的小朋友可以來參考下
2015-08-08
微信小程序支付及退款流程詳解
近期在做微信小程序時(shí)，涉及到了小程序的支付和退款流程，所以也大概的將這方面的東西看了一個(gè)遍，就在這篇文章里總結(jié)一下
2017-11-11
JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法,實(shí)例分析了javascript操作html元素的技巧,需要的朋友可以參考下
2015-03-03
JS實(shí)現(xiàn)音樂導(dǎo)航特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)音樂導(dǎo)航特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
彌補(bǔ)localStorage容量缺陷方法詳解
這篇文章主要為大家介紹了彌補(bǔ)localStorage容量缺陷的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用，他可以返回請求的數(shù)據(jù)，然后利用客戶端的js進(jìn)行解析，這一點(diǎn)體現(xiàn)出js的強(qiáng)大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12