Search 搜索

此组件集成了常见搜索框所需功能，可以一键引入。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 placeholder 属性设置占位内容
• 通过 v-model 双向绑定一个变量值，设置初始化时搜索框的值，如果初始内容为空，那么请绑定一个值为空字符的变量

说明：因为是双向绑定的，所以当组件内容输入框内容变化时，也会实时的同步到绑定的 keyword 变量中，这就意味着，您无需监听 change 事件，也能实时的获取到输入框的内容

<template>
    <fu-search v-model="keyword" placeholder="二十四桥明月夜"></fu-search>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    let keyword = ref('玉人何处教吹箫');
</script>

设置输入框形状

通过 radius 属性设置输入框两端的形状，可自由设置

<fu-search radius="30"></fu-search>

是否开启清除控件

通过 clearabled 属性设置，可选值：

• always 一直显示清除控件
• auto 输入框不为空时显示清除控件（默认 auto）
• none 一直不显示清除控件

<!-- 一直显示 -->
<fu-search placeholder="一直显示" clearabled="always"></fu-search>

<!-- 自动显示隐藏 -->
<fu-search placeholder="自动显示隐藏" clearabled="auto"></fu-search>

<!-- 一直不显示 -->
<fu-search placeholder="一直不显示" clearabled="none"></fu-search>

是否开启右侧控件

此控件为类似按钮形式，可以设置为 "搜索" 或者 "取消"等内容

• showAction 属性是否开启右侧按钮控件
• actionText 属性设置控件内容
• actionStyle 属性设置控件样式

<fu-search :showAction="true" actionText="搜索"></fu-search>

自定义样式

• 通过 inputAlign 属性设置输入框内容的对其方式，和css的 text-align 同理
• 通过 height 属性设置组件高度
• 通过 readonly 属性是否开启只读模式

<fu-search inputAlign="center" height="40" readonly></fu-search>

API

Search Props

属性名	说明	类型	默认值	可选值
v-model	双向绑定输入框值	String	-	-
placeholder	输入框占位内容	String	-	-
radius	输入框两端圆角大小	String｜Number	5	-
maxlength	输入框最大长度	String｜Number	150	-
clearabled	是否显示清除控件	String	auto	always/none
bgColor	输入框背景色	String	#F8F8F8	-
focus	输入框是否聚焦	Boolean	false	true
readonly	是否只读模式	Boolean	false	true
showAction	是否显示右侧按钮控件	Boolean	true	false
actionText	右侧按钮控件内容	String	搜索	-
actionStyle	右侧按钮控件样式	Object	-	-
inputAlign	输入框内容对齐方式	String	center	left/right
searchIcon	左边的图标	String	magnifier	-
searchIconSize	左边的图标大小	String	18	-
searchIconColor	左边的图标颜色	String	#c0c4cc	-
height	输入框高度	String｜Number	36	-
color	输入框字体颜色	String	-	-

Search Events

事件名	说明	回调参数
confirm	fuSearch 的输入框 confirm 事件，返回参数为fuSearch的value	() => void
input	fuSearch 的输入框 input 事件，返回参数为fuSearch的value	() => void
clear	设置了 clearabled 清空内容时会发出此事件	() => void
blur	输入框失去焦点时触发	() => void
focus	输入框获得焦点时触发	() => void
custom	用户点击右侧控件时触发	() => void
click	readonly为true时，点击输入框，发出此事件，用于跳转搜索页	() => void

Search Slot

名称	说明
searchIcon	自定义左边的图标
clearIcon	自定义右侧的清除图标