uni-app搜索框封装

主要功能:

  1. 可自定义输入框样式
  2. 可自定义按钮样式
  3. 可自定义引入图标
  4. 微信小程序增加语音输入和扫码功能

搜索框自定义属性说明:

属性名 类型 默认值 说明
btnLinkInput Boolean false 按钮是否与input框相连,只有开启按钮的时候才生效
inputAttr Object null 输入框的样式
btnAttr Object null 按钮样式
voiceAttr Object null 语音输入模块样式,只对微信 开启语音功能图标时有效
iconAttr Object null 图标样式
iconSrc Object null 图标地址

inputAttr属性说明:

属性名 类型 默认值 说明
height Number 60 输入框高度,默认为最小高度60,单位为upx
borderRadius Number 30 输入框的圆角, 单位upx
border String 1px solid #c8c7cc 边框样式
borderWidth Number 1 边框宽度,单位upx
backgroundColor String #ffffff 背景颜色
fontSize Number 28 字体大小,单位upx
color String #333 字体颜色
paddingLeft Number 0 左边填充 ,单位upx
placeholderText String 请输入搜索内容 输入框未输入时的提示文本
placeholderPosition String left 提示文本位置 值: left 、 center
placeholderColor String #808080 输入框的提示文本的颜色

btnAttr属性说明:

属性名 类型 默认值 说明
enable Boolean true 是否启用按钮
text String 取消 按钮显示的文本
paddingLeft Number 10 按钮左边填充, 单位upx
paddingRight Number 0 按钮右边填充,单位upx
fontSize Number 28 按钮字体大小,单位upx
backgroundColor String #ffffff 按钮背景颜色
borderRadius Number 30 按钮圆角,单位 upx
color String #333 字体颜色
border String none 按钮边框
borderWidth Number 1 边框宽度,单位upx
backgroundImage String 按钮背景图片,只能为base64位或远程图片
backgroundPosition String center center 背景图位置
backgroundSize String contain 背景图尺寸

voiceAttr属性说明:(仅在微信小程序中开启语音图标时有效)

属性名 类型 默认值 说明
btnColor String #fff 录音按钮文本颜色
btnActiveColor String #fff 录音按钮按住时的文本颜色
listenColor String #fff 聆听容器的文本颜色
btnBackgroundColor Sting #f1f1f1 录音按钮的背景色
btnBackgroundActiveColor String #c8c7cc 录音按钮按住时的背景色
listenBackgroundColor String #c8c7cc 聆听容器的背景色
text String 按住 说话 录音按钮的文本
activeText String 松开 结束 录音按钮按下时的文本

iconAttr属性说明:

属性名 类型 默认值 说明
width Number 60 图标宽度,单位upx
height Number 60 图标高度,单位upx
padding Number 10 图标内填充,单位upx
scale Number || String 1 图标缩放

iconSrc属性说明:(属性有值时开启对应图标)

属性名 类型 默认值 说明
logo String logo图标相对地址或远程地址
voice String 语音图标相对地址或远程地址
scan String 扫码图标相对地址或远程地址
clear String 清空图标相对地址或远程地址
placeholder String 输入框提示图标相对地址或远程地址
search String 搜索图标相对地址或远程地址

组件中在输入框左右边还新增了一个slot图标插槽,用户可以自定义自己的功能图标去拓展搜索框的功能,示例代码如下:

<lee-search :iconSrc="iconSrc">
    <template v-slot:icon>
        <view class="icon-wrap">
            <image class="icon"  mode="aspectFit"  src="../../static/lee-search/icon_clear.png"></image>
        </view>
    </template>
</lee-search>

注:使用slot插槽引入图标时,图标与组件内置图标存在没有垂直对齐方向上的情况,需要外层套一层标签使用css修复这个问题,代码如下:

.icon-wrap{
            position:relative;
            height:60upx; // 搜索框高度
            top:0;
            box-sizing: border-box;
            .icon{
                width:60upx;
                height:60upx;
                padding:10upx;
                box-sizing: border-box;
            }
        }

其它属性为uni-app中 input组件原生属性,参考链接

[https://uniapp.dcloud.io/component/input]:

可触发的事件列表:

属性名 类型 默认值 说明
@scan EventHandle 点击扫码图标时触发事件,可接收扫码的结果
@search EventHandle 点击搜索图标触发事件
@btnClick EventHandle 点击按钮时触发事件,可接收按钮的文本
@clear EventHandle 点击清空按钮时触发事件
@voice EventHandle 点击语音图标触发事件
@input EventHandle 当键盘输入时触发事件
@blur EventHandle 输入框失去焦点时触发
@focus EventHandle 输入框聚焦时触发
@confirm EventHandle 点击完成按钮时触发

关于语音功能的配置

1.在manifest.json文件中添加语音插件

    "mp-weixin": {
        /* 小程序特有相关 */
        "appid": "此处为自己申请的appid",
        "setting": {
            "urlCheck": false
        },
        "plugins": {
            "WechatSI": {
                "version": "0.0.6",
                "provider": "wx069ba97219f66d99"
            }
        },
        "usingComponents": true
    }

2.在小程序管理平台 设置 》第三方设置 》添加插件 添加 “微信同声传译” 插件

插件文档链接:

[https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=2051927552&lang=zh_CN#-]:

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

录音功能

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问