首先页面引入:
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还会存在问题,问题就是,虽然不跳转页面了,但是还会向后端发送请求。
所以采取οnsubmit="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
效果图如下: