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

效果图如下:

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值