Search 搜索 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Search 搜索

搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。

# 基本使用

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

说明： 因为是双向绑定的，所以当组件内容输入框内容变化时，也会实时的反映到绑定的 keyword 变量，这意味着，您无需监听 change 事件，也能实时的得知输入框的内容。

<template>
	<un-search placeholder="日照香炉生紫烟" v-model="keyword"></un-search>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '遥看瀑布挂前川'
			}
		}
	}
</script>
✅ Copy success!

# 设置输入框形状

通过 shape 设置输入框两端的形状，square-方形带圆角，round(默认)-半圆形

<un-search shape="round"></un-search>
✅ Copy success!

# 是否开启清除控件

clearabled(默认为 true)设置为 true 的话，输入框有内容时，右边会显示一个清除的图标

<un-search :clearabled="true"></un-search>
✅ Copy success!

# 是否开启右边控件

该控件为类似按钮形式，可以设置为"搜索"或者"取消"等内容，如果开启动画效果，用户确认搜索后，该控件会自动消失

showAction 配置是否开启右边按钮控件
actionText 配置控件内容
animation(默认为 false)设置为 true 的话，失去焦点，或者点击控件按钮时，控件自动消失，并且带有动画效果

说明

如果不想点击右侧控件时自动消失，请把 animation 设置为 false
右侧控件的默认文字为"搜索"(它本意为控件，碰巧内容为"搜索"二字，并非说它就是一个搜索按钮)，点击它的时候触发的是 custom 事件，而不是 search 事件

<un-search :showAction="true" actionText="搜索" :animation="true"></un-search>
✅ Copy success!

# 自定义右侧插槽

<un-search
	placeholder="自定义右侧插槽"
	v-model="value15"
	:search-icon="false"
	:show-action="false"
>
	<template #right>
		<un-icon name="scan" size="20"></un-icon>
	</template>
</un-search>
✅ Copy success!

# 自定义样式

通过 inputAlign 设置输入框内容的对其方式，和 css 的 text-align 同理
通过 borderColor 设置整个搜索组件的边框，只要配置了颜色，才会出现边框
通过 height 设置组件高度
通过 disabled 设置是否禁用输入框
通过 bgColor 设置是搜索组件背景颜色

<un-search inputAlign="center" height="70"></un-search>
✅ Copy success!

# 监听事件

# change 事件

当输入框内容发生变化时触发 change 事件，可以实时获取用户输入的内容：

<template>
	<view>
		<un-search 
			placeholder="请输入搜索内容" 
			v-model="searchValue" 
			@change="onSearchChange"
		/>
		<text class="search-text">当前输入：{{ searchValue }}</text>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const searchValue = ref<string>('')

const onSearchChange = (value: string) => {
	console.log('输入内容发生变化:', value)
	// 可以在这里处理实时搜索逻辑
}
</script>

<style>
.search-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
}
</style>
✅ Copy success!

# search 事件

当用户确定搜索时触发 search 事件，比如按回车键或点击手机键盘的搜索键：

<template>
	<view>
		<un-search 
			placeholder="请输入关键词搜索" 
			v-model="keyword" 
			@search="onSearch"
		/>
		<view class="search-result" v-if="searchResult">
			<text>搜索结果：{{ searchResult }}</text>
		</view>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const keyword = ref<string>('')
const searchResult = ref<string>('')

const onSearch = (value: string) => {
	console.log('开始搜索:', value)
	// 模拟搜索逻辑
	searchResult.value = `搜索"${value}"的结果...`
}
</script>

<style>
.search-result {
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
}
</style>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值	可选值
v-model	双向绑定输入框搜索值	String	-	-
shape	搜索框形状，round-圆形，square-方形	String	round	square
bgColor	搜索框背景颜色	String	#f2f2f2	-
placeholder	占位文字内容	String	请输入关键字	-
clearabled	是否启用清除控件	Boolean	true	false
focus	是否自动获得焦点	Boolean	false	true
showAction	是否显示右侧控件(右侧的"搜索"按钮)	Boolean	true	false
actionStyle	右侧控件的样式，对象形式	Object	-	-
actionText	右侧控件文字	String	搜索	-
inputAlign	输入框内容水平对齐方式	String	left	center / right
inputStyle	自定义输入框样式，对象形式	Object	-	-
disabled	是否启用输入框	Boolean	false	true
borderColor	边框颜色，配置了颜色，才会有边框	String	transparent	-
searchIconColor	搜索图标的颜色，默认同输入框字体颜色	String	#909399	-
searchIconSize	搜索图标的大小	Number	22	-
color	输入框字体颜色	String	#606266	-
placeholderColor	placeholder 的颜色	String	#909399	-
searchIcon	输入框左边的图标，可以为 uView 图标名称或图片路径	String	Boolean	search
margin	组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法	String	0	-
animation	是否开启动画，见上方说明	Boolean	false	true
value	输入框初始值	String	-	-
maxlength	输入框最大能输入的长度，-1 为不限制长度	String \| Number	-1	-
height	输入框高度，单位 rpx	String \| Number	64	-
label	搜索左侧文本信息	String \| Number	-	-

# Events

您可以通过监听 change 事件，在回调中将返回的结果绑定一个变量去获得用户的输入内容。
但如"基本使用"中的说明一样，您双向绑定了一个变量后，无需监听 change 事件也是可以的。

事件名	说明	参数名称	参数说明	版本
change	输入框内容发生变化时触发	value:string	输入框的值	-
search	用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发	value:string	输入框的值	-
custom	用户点击右侧控件时触发	value:string	输入框的值	-
blur	输入框失去焦点时触发	value:string	输入框的值	-
focus	输入框获得焦点时触发	value:string	输入框的值	-
clear	配置了 `clearabled` 后，清空内容时会发出此事件	-	-	-
click	`disabled` 为 `true` 时，点击输入框，发出此事件，用于跳转搜索页	-	-	-
clickIcon	左侧 icon 点击时候时触发	-	-	-

# Slot

名称	说明
lable	自定义搜索框左边显示内容
right	自定义右侧内容

← Rate 评分 NumberBox 步进器 →