操作search組件在鍵盤顯示

這次帶給大家操作search組件在鍵盤顯示，操作search組件在鍵盤顯示的注意事項有哪些，下面就是實戰案例，一起來看一下。

程式碼如下所示：

<form action="" target="frameFile">
 <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
 <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
  <ListItem :lists="lists"></ListItem>
  <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p>
 </p>
 </mt-search>
 <iframe name=&#39;frameFile&#39; style="display: none;"></iframe>
</form>

解決方法：

mint-ui的search元件input預設也是type="search"類型的，但是還需要在外層包一組form標籤，並且帶有action,就會在鍵盤中出現搜尋按鈕。

如上是方法一：

在手機鍵盤點擊搜尋的時候，頁面會刷新，所以給form加一個target，target規定在何處打開action URL，再放入一個隱藏的iframe,起名為form的target的值，這樣則在當前頁面展示出搜尋的內容

如下是方法二：

<form action="" onsubmit="return false;">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
   <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
   <ListItem :lists="lists"></ListItem>
   <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p>
   </p>
  </mt-search>
</form>

這裡直接給onsubmit事件寫入return false，禁止提交，則搜尋清單頁也可以在目前頁面展示。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是操作search組件在鍵盤顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！