Search 搜索框

预览

01:38



---

组件名：rice-search

搜索组件，集成了常见搜索框所需功能

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 v-model 绑输入框的值

<rice-search v-model="value" placeholder="请输入搜索关键词" />

事件监听

Search 组件提供了事件，search 事件在点击键盘上的搜索/回车按钮后触发，input 事件在输入框输入时触发。

<rice-search v-model="value2" placeholder="请输入搜索关键词" @search="onSearch" @input="onInput"
@clickLeftIcon="onClickLeftIcon" />

<script setup lang="ts">
  const onSearch = (val:string) => {
    console.log('search',val)
  }

  const onInput = () => {
    console.log('onInput')
  }

  const onClickLeftIcon = (val:string) => {
    showToast('leftIcon',val)
  }

</script>

禁用

通过设置 disabled 为 true 可以禁用搜索框，此时可以通过 clickInput 事件执行相对于的操作，如跳转页面

<rice-search disabled placeholder="禁用的输入框" @clickInput="onClickInput"/>

显示 action

show-action 设置为 true 可以显示右侧的搜索按钮

<rice-search placeholder="请输入搜索关键词" show-action @clickAction="onClickAction" />
<script setup>
	const onClickAction = (val : string) => {
		console.log('action',val)
	}
</script>

自定义背景色

bg-color 可以设置搜索框的背景色，input-color 可以设置输入框的背景色

<rice-search placeholder="请输入搜索关键词" bg-color="#4fc08d" input-color="#fff" />

自定义样式

<rice-search placeholder="请输入搜索关键词" height="40px" input-align="center" shape="round" left-icon=""
right-icon="search" right-icon-size="22" @clickRightIcon="onClickRightIcon" />

<script setup>
  const onClickRightIcon=(val:string)=>{
    console.log('onClickRightIcon',val)
  }
</script>

API

Props

属性名	类型	说明	默认值
v-model/model-value	String	绑定的值	-
label	String	搜索框左侧文本	-
shape	String	搜索框形状，可选值：square、round	square
bg-color	String	搜索框外部背景色	-
input-color	String	搜索框的背景颜色	-
font-size	String|Number	输入框字体大小	-
color	String	输入框字体颜色	-
height	String|Number	输入框的高度	-
maxlength	Number	输入的最大字符数	-
hold-keyboard	Boolean	focus时，点击页面的时候不收起键盘	-
placeholder	String	占位提示文字	-
placeholder-style	String	指定 placeholder 的样式	-
focus	Boolean	是否聚焦	-
clearable	Boolean	是否启用清除图标，默认true	-
clear-icon	String	清除图标的name值	-
clear-trigger	String	显示清除图标的时机，可选值：always、focus	focus
show-action	Boolean	是否在搜索框右侧显示搜索按钮	-
action-text	String	按钮的文字默认 搜索	-
action-size	String|Number	按钮文字的大小	-
action-color	String	按钮文字的颜色	-
disabled	Boolean	是否禁用	-
input-align	String	输入框对齐方式，可选值：left、center、right	left
left-icon	String	输入框左侧图标名称，为空字符串时不展示	-
right-icon	String	输入框右侧图标名称，为空字符串时不展示	-
left-icon-size	String|Number	左侧图标大小	-
left-icon-color	String	左侧图标颜色	-
right-icon-size	String|Number	左侧图标大小	-
right-icon-color	String	右侧图标颜色	-
custom-style	Object	自定义样式	-

Event

事件名	说明	回调参数
input	输入时触发	(value:string)
search	点击键盘什么的搜索按钮或回车键时触发	(value:string)
focus	输入框获得焦点时触发	(event: UniInputFocusEvent)
blur	输入框失去焦点时触发	(event: UniInputBlurEvent)
keyboardheightchange	键盘高度改变时触发	(event: UniInputKeyboardHeightChangeEvent)
clickInput	点击输入框时触发	(e : UniPointerEvent)
clickLeftIcon	点击左侧图标时触发	(value: string)
clickRightIcon	点击右侧图标时触发	(value: string)
clickAction	点击右侧内容触发	(value: string)
clear	点击清空图标时触发	-

Slots

名称	说明
left	自定义左侧内容（输入框外）
label	自定义左侧内容 （输入框内）
leftIcon	自定义左侧图标
rightIcon	自定义右侧图标
action	自定义右侧内容 （输入框外）

类型定义

组件导出如下类型

//组件类型
const iconRef=ref<RiceSearchComponentPublicInstance|null>(null)