mint-ui的search组件使用

版权声明： https://blog.csdn.net/xiasohuai/article/details/84191126

首先页面引入：

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

效果图如下：