快捷導(dǎo)航

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

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

這篇文章主要介紹了mint-ui的search組件在鍵盤(pán)顯示搜索按鈕的實(shí)現(xiàn)方法,需要的朋友可以參考下

代碼如下所示：

<form action="" target="frameFile">
 <mt-search v-model="value" placeholder="請(qǐng)輸入關(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ì)在鍵盤(pán)中出現(xiàn)搜索按鈕。

如上是方法一：

在手機(jī)鍵盤(pán)點(diǎn)擊搜索的時(shí)候，頁(yè)面會(huì)刷新，所以給form加一個(gè)target，target規(guī)定在何處打開(kāi) action URL，再放入一個(gè)隱藏的iframe,起名為form的target的值，這樣則在當(dāng)前頁(yè)面展示出搜索的內(nèi)容

如下是方法二：

<form action="" onsubmit="return false;">
  <mt-search v-model="value" placeholder="請(qǐng)輸入關(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事件寫(xiě)入return false，禁止提交，則搜索列表頁(yè)也可以在當(dāng)前頁(yè)面展示。

總結(jié)

以上所述是小編給大家介紹的mint-ui的search組件在鍵盤(pán)顯示搜索按鈕的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2022-12-12
JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法
這篇文章主要介紹了JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法,實(shí)例分析了javascript操作時(shí)間及DOM節(jié)點(diǎn)實(shí)現(xiàn)定時(shí)觸發(fā)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
js獲取對(duì)象為null的解決方法
js獲取對(duì)象為null的情況，想必很多的朋友都有遇到過(guò)吧，只要是js對(duì)字符串的解析跟對(duì)數(shù)字串的解析還是不太一樣，這是需要注意的地方
2013-11-11
js 顯示base64編碼的二進(jìn)制流網(wǎng)頁(yè)圖片
base64簡(jiǎn)單地說(shuō)，它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，我們把圖像文件的內(nèi)容直接寫(xiě)在了HTML 文件中，這樣做的好處是，節(jié)省了一個(gè)HTTP 請(qǐng)求
2014-04-04
echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置方法
近期要做圖表,我選擇了ECharts做可視化圖表,圖表的樣式有陰影,這篇文章主要給大家介紹了關(guān)于echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
JS數(shù)組方法join()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法join()用法,結(jié)合實(shí)例形式分析了JS數(shù)組join()方法具體功能、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-01-01
微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果
這篇文章主要介紹了微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Bootstrap頁(yè)面縮小變形的快速解決辦法
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁(yè)布局方法，下面通過(guò)本文給大家介紹bootstrap頁(yè)面縮小變形的快速解決辦法，需要的朋友參考下吧
2017-02-02
淺談JS如何實(shí)現(xiàn)真正的對(duì)象常量
下面小編就為大家?guī)?lái)一篇淺談JS如何實(shí)現(xiàn)真正的對(duì)象常量。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
JS實(shí)現(xiàn)數(shù)組淺拷貝和深拷貝的方法
淺拷貝創(chuàng)建一個(gè)新的對(duì)象,來(lái)接受重新復(fù)制或引用的對(duì)象值,如果對(duì)象屬性是基本的數(shù)據(jù)類型,復(fù)制的就是基本類型的值給新對(duì)象,這篇文章主要介紹了js實(shí)現(xiàn)數(shù)組淺拷貝和深拷貝,需要的朋友可以參考下
2024-01-01