欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)搜索按鈕。

如上是方法一：

在手機鍵盤點擊搜索的時候，頁面會刷新，所以給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)文章

  • 利用JavaScript實現(xiàn)檢測用戶是否在線功能

    利用JavaScript實現(xiàn)檢測用戶是否在線功能

    這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)檢測用戶是否在線功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2022-12-12
  • JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時間的方法

    JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時間的方法

    這篇文章主要介紹了JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時間的方法,實例分析了javascript操作時間及DOM節(jié)點實現(xiàn)定時觸發(fā)的技巧,非常具有實用價值,需要的朋友可以參考下
    2015-03-03
  • js獲取對象為null的解決方法

    js獲取對象為null的解決方法

    js獲取對象為null的情況，想必很多的朋友都有遇到過吧，只要是js對字符串的解析跟對數(shù)字串的解析還是不太一樣，這是需要注意的地方
    2013-11-11
  • js 顯示base64編碼的二進(jìn)制流網(wǎng)頁圖片

    js 顯示base64編碼的二進(jìn)制流網(wǎng)頁圖片

    base64簡單地說，它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個HTTP 請求
    2014-04-04
  • echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置方法

    echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置方法

    近期要做圖表,我選擇了ECharts做可視化圖表,圖表的樣式有陰影,這篇文章主要給大家介紹了關(guān)于echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • JS數(shù)組方法join()用法實例分析

    JS數(shù)組方法join()用法實例分析

    這篇文章主要介紹了JS數(shù)組方法join()用法,結(jié)合實例形式分析了JS數(shù)組join()方法具體功能、定義、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2020-01-01
  • 微信小程序的tab選項卡的實現(xiàn)效果

    微信小程序的tab選項卡的實現(xiàn)效果

    這篇文章主要介紹了微信小程序的tab選項卡的實現(xiàn)效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Bootstrap頁面縮小變形的快速解決辦法

    Bootstrap頁面縮小變形的快速解決辦法

    bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁布局方法，下面通過本文給大家介紹bootstrap頁面縮小變形的快速解決辦法，需要的朋友參考下吧
    2017-02-02
  • 淺談JS如何實現(xiàn)真正的對象常量

    淺談JS如何實現(xiàn)真正的對象常量

    下面小編就為大家?guī)硪黄獪\談JS如何實現(xiàn)真正的對象常量。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • JS實現(xiàn)數(shù)組淺拷貝和深拷貝的方法

    JS實現(xiàn)數(shù)組淺拷貝和深拷貝的方法

    淺拷貝創(chuàng)建一個新的對象,來接受重新復(fù)制或引用的對象值,如果對象屬性是基本的數(shù)據(jù)類型,復(fù)制的就是基本類型的值給新對象,這篇文章主要介紹了js實現(xiàn)數(shù)組淺拷貝和深拷貝,需要的朋友可以參考下
    2024-01-01

最新評論