首先頁面引入：

import { Search} from 'mint-ui';
Vue.component('mt-search', Search);

 vue頁面程式碼

<div class="page-search">
    <form action="" target="frameFile">
       <mt-search v-model="commodityName" cancel-text="取消"  placeholder="搜尋" @keyup.enter.native="loadListData"></mt-search>
    </form>
    <iframe name='frameFile' style="display: none;"></iframe>
</div>
 

css樣式：

<style>
  .searchWrap {
    margin: 5px 8px;
    background: #fff;
  }
  .mint-searchbar{
    padding:5px 5px 0 5px;
    box-sizing: border-box
  }
</style>

<iframe>這段標籤程式碼的含義是：

防止點選電腦回車或者手機搜尋按鈕跳轉新頁面。因為from表單點選搜尋或者回車的時候，它傳送請求會跳轉一個新頁面。但是用iframe還會存在問題，問題就是，雖然不跳轉頁面了，但是還會向後端傳送請求。

所以採取onsubmit="return false;

<div class="page-search">
    <form action="" target="frameFile" onsubmit="return false;>
       <mt-search v-model="commodityName" cancel-text="取消"  placeholder="搜尋" @keyup.enter.native="loadListData"></mt-search>
    </form>
</div>
 

傳送請求呼叫方法：@keyup.enter.native

效果圖如下：