Mint-ui的search组件的使用

首先页面引入：

 
 

   
   

    
    

   
   
   
   

    
    

     
     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

效果图如下：