首先页面引入:
-
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
效果图如下: