uView input输入框和search输入框实现搜索功能

背景：

在手机端实现搜索框的“查询功能”，使用uView组件库。有两种实现思路：

1.input输入框

2.search搜索框

效果展示：

一、search搜索框

官方文档：点击跳转uView官网

实际代码：

//u-search组件
<u-search 
placeholder="请输入船名/MMSI/人名/手机号进行搜索" 
v-model="searchVal" 
shape="square" 
:clearabled="true"
:showAction="true" 
actionText="查询" 
:animation="false"
:actionStyle="{ width: '76rpx', height: '76rpx', borderRadius: '10rpx', 
border: '2rpx solid #137DCA', 
lineHeight: '76rpx', backgroundColor: '#cde2ef' }"
bgColor='#fff' 
borderColor="#137DCA" 
searchIconColor="#127DCA" 
height="76rpx" 
@clickIcon="clickSearch"
@focus="focusSearch" 
@search="clickSearch" 
@custom="clickSearch"
@clear="clickClear"
>
</u-search>

 //备注说明
@clickIcon="clickSearch" //点击左侧“放大镜图标”触发的事件
@focus="focusSearch"     //聚焦
@search="clickSearch"    //手机端，手机键盘的回车/或搜索按钮
@custom="clickSearch"    //点击右侧“查询”按钮触发的事件
@clear="clickClear"      //清除

二、input输入框

官方文档：点击跳转官方文档

备注：后置图标和后置插槽是不一样的。input组件的没有点击图标的事件，无法通过点击后置图标触发事件。但是可以给后置插槽中的icon自定义一个click事件 或者tag事件。

实际代码：

//u-input组件
<u--input 
v-model="searchVal" 
placeholder="请输入船名/MMSI/人名/手机号进行搜索" 
suffixIcon="search"
suffixIconStyle="color: #127DCA;font-size: 52rpx;font-weight: bold"
:customStyle="{ height: '52rpx', borderRadius: '10rpx', lineHeight:'76rpx',backgroundColor: '#fff'}"
:clearable="true"
@focus="focusSearch" 
@confirm="clickSearch"  
@clear="clickClear"
>
</u--input>

//备注说明

@focus="focusSearch"    //聚焦
@confirm="clickSearch"   //手机端，手机键盘的回车/或搜索按钮触发的事件
//@click="clickSearch"      //注意，组件库没有click事件
@clear="clickClear"          //清除

三、input输入框的plus版

在第二点，实现了一个搜索框，但是发现点击右侧的放大镜，无法绑定查询事件 ，后置插槽我们自定义了一个suffixIcon="search"，但是官网没有给出图标点击的事件，这是跟search组件的不同，search组件有一个@clickIcon="clickSearch"事件。

解决思路：

1.后置插槽，然后绑定查询事件。推荐方法

2.假装写一个透明的div标签，放在放大镜的上面，点击div的click事件。不推荐

 实际代码：推荐

//u--input组件的后缀插槽，并绑定click事件
<u--input 
v-model="searchVal" 
placeholder="请输入船名/MMSI/人名/手机号进行搜索" 
:customStyle="{ height: '52rpx', borderRadius: '10rpx', lineHeight: '76rpx', backgroundColor: '#fff'}"
:clearable="true"
@focus="focusSearch" 
@confirm="clickSearch"  
@clear="clickClear">
     <template slot="suffix">
<u-icon name="search" color="#127DCA" size="52rpx" @click="clickSearch"></u-icon>
     </template>
</u--input>

 效果图：