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

<form action="" target="frameFile">
  <mt-search v-model="value" placeholder="請輸入關鍵字" @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默認也是type="search"類型的，但是還需要在外層包一組form標簽，並且帶有action,就會在鍵盤中出現搜索按鈕。

如上是方法一：

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

如下是方法二：

<form action="" v-on:submit.prevent=""

> <mt-search v-model="value" placeholder="請輸入關鍵字" @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，

 onsubmit="return false;"

禁止提交，但是由於是vue所以使用vue自帶的submit阻止刷新事件，則搜索列表頁也可以在當前頁面展示。

 

在search方法中，加一個點擊搜索按鈕后軟鍵盤收起的事件：

document.activeElement.blur();

 

參考文章：http://blog.csdn.net/github_39237934/article/details/75258285