搜索栏 xSearch

---

预览

介绍

可定制化强

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-search/x-search.uvue

使用

<x-search></x-search>

Props 属性

名称	说明	类型	默认值
round	输入框圆角	string	"8"
showClear	是否显示清除图标	boolean	true
modelValue	双向绑定的输入值	string	""
placeholder	输入框提示语	string	""
iconColor	搜索图标和清除图标的颜色	string	"#bfbfbf"
color	搜索条背景	string	"#ffffff"
cancelFontColor	取消的文本色	string	"#000000"
darkColor	暗黑模式下的搜索条背景，空值取：sheetDarkColor	string	""
inputBgColor	输入框的背景	string	"#f5f5f5"
fontColor	输入框的字体颜色	string	"#333333"
border	边框style: [width, style, color]	Array	(): string[] => [] as string[]
darkBorderColor	暗黑模式下边框颜色	string	""
placeholderStyle	输入框的提示样式	string	""
showCancel	是否显示右侧取消按钮	boolean	true
disabled	禁用输入选择	boolean	false
autoFocus	自动获得焦点	boolean	false

Events 事件

名称	参数	说明
cancel	-	取消时触发
clear	-	清空时触发
rightClick	-	点击右侧文本时触发
confirm	-	输入法确认搜索时触发
input	-	输入时触发
update:modelValue	-	等同 v-model

Slots 插槽

名称	说明	数据
left	左插槽	-
inputLeft	-	-
inputRight	-	-
cancel	-	-
right	-	-

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/daohang/search

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

	<x-sheet :round="['0']" :padding="['16','0']" :margin="['0','0','0','16']">
		<x-search v-model="inputval"></x-search>
		<x-text>{{inputval}}</x-text>
	</x-sheet>
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">搜索栏 xSearch</x-text>
		<x-text color="#999999">样式可自己完全定义。如果还不满足建议修改源码</x-text>
	</x-sheet>
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b">复杂的布局可通过插槽自定义</x-text>
	</x-sheet>
	<x-sheet :round="['0']" :padding="['16','0']" :margin="['0','0','0','16']">
		<x-search right-text="取消" round="64" :show-clear="false">
			<template v-slot:left>
				<view class="flex flex-row flex-row-center-center">
					<x-text class="mr-5 text-size-m">江西省</x-text>
					<x-icon class="mr-5" color="#bfbfbf" name="arrow-down-s-line" font-size="16"></x-icon>
				</view>
			</template>
			<template v-slot:inputLeft>
				<x-icon style="margin-left:12px;" color="primary" name="qr-scan-2-line" font-size="16"></x-icon>
			</template>
			<template v-slot:inputRight>
				<x-button class="mr-2 mt-2" round="24" size="small" height="34" width="62">搜索</x-button>
			</template>
		</x-search>
	</x-sheet>

</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const inputval = ref("")
</script>

<style lang="scss">

</style>