如何使用mint-ui的search組件在鍵盤顯示搜索按鈕

小編給大家分享一下如何使用mint-ui的search組件在鍵盤顯示搜索按鈕，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

代碼如下所示：

<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' ></iframe>
</form>

解決辦法：

mint-ui的search組件input默認(rèn)也是type="search"類型的，但是還需要在外層包一組form標(biāo)簽，并且?guī)в衋ction,就會(huì)在鍵盤中出現(xiàn)搜索按鈕。

如上是方法一：

在手機(jī)鍵盤點(diǎn)擊搜索的時(shí)候，頁(yè)面會(huì)刷新，所以給form加一個(gè)target，target規(guī)定在何處打開 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事件寫入return false，禁止提交，則搜索列表頁(yè)也可以在當(dāng)前頁(yè)面展示。

看完了這篇文章，相信你對(duì)“如何使用mint-ui的search組件在鍵盤顯示搜索按鈕”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！