Search搜索

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-search": "/miniprogram_npm/vtuweapp/search/vtu-search"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-search></vtu-search>
    2.

    复合型

    1. <vtu-search search-shape="circle">
    2.     <vtu-btn slot="append" type="primary" inlineBlock round shadow width="70px" size="small">搜索</vtu-btn>
    3. </vtu-search>
    4.

    占位内容居中

    <vtu-search search-shape="circle" search-align="center" search-icon height="60px" ></vtu-search>

    自定义占位文字

    <vtu-search search-shape="circle" bg-color="red" placeholder="搜索图片、视频、网址" search-icon="iconfont icon-biaoxing">
    <vtu-avatar src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/1.png" slot="prepend" circle size="small"></vtu-avatar>
</vtu-search>

    自定义背景色

    <vtu-search  bg-color="#1cbbb4">
    <vtu-avatar src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/2.png" slot="prepend" circle size="small"></vtu-avatar>
</vtu-search>

    高级用法

    <vtu-search search-shape="circle" bg-color="#6739b6" placeholder="搜索图片、视频、网址" confirm-type="send">
    <picker mode="region" slot="prepend">
        <view class="select"> 北京 <i class="iconfont icon-jiantouxia"></i></view>
    </picker>
    <vtu-avatar src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/1.png" slot="append" circle size="small"></vtu-avatar>
</vtu-search>

    高级用法

    <vtu-search bg-color="#333333" input-bg-color="#000" font-color="#fff" bind:clear="clear" bind:focus="focus" bind:confirm="confirm" bind:blur="blur">
    <view class="iconList" slot="append" >
        <i class="iconfont icon-jiahao"></i>
        <i class="iconfont icon-yijian">
          <vtu-badge right="0px" top="-5px" is-dot></vtu-badge>
        </i>
    </view>
</vtu-search>

    组件参数

    Props

    参数说明类型默认值必填
    placeholder搜索文本框占位文字String-否
    bg-color搜索栏背景色String#fff否
    input-bg-color文本框背景色String#f9f9f9否
    height搜索栏高度String50px否
    search-icon搜索框内图标String-否
    search-shape搜索框形状，round/circleStringround否
    search-align搜索框占位文字水平位置Stringleft否
    font-size搜索框文字大小String12px否
    font-color搜索框文字颜色String-否
    confirm-type设置键盘右下角按钮的文字Stringsearch否
    value输入框的初始内容String-否
    clearable是否可清空Booleantrue否

    Events

    事件说明返回值
    bind:input键盘输入时触发event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
    bind:confirm点击完成按钮时触发event.detail = {value: value}
    bind:focus输入框聚焦时触发event.detail = { value, height }，height 为键盘高度
    bind:blur输入框失去焦点时触发event.detail = {value: value}
    bind:clear输入框内容清空时触发-

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Search 搜索 - 图1