mint-ui的search元件怎樣可以在鍵盤顯示搜尋按鈕

這次帶給大家的是mint-ui的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中文網其它相關文章！

相關閱讀：

怎麼用JS做出切換隱藏與顯示同時切換圖示

Vue.js如何分割元件

ES6 javascript中類別的靜態方法，屬性與實例屬性怎麼使用

以上是mint-ui的search元件怎樣可以在鍵盤顯示搜尋按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！