搜索组件

ux-search-box

搜索框是较为常用的组件，uxui 内置的搜索框组件具备配置灵活、功能全面等优点，您可以在页面布局中直接使用它。

运行图示

组件属性

属性名称	类型	默认值	作用
customClass	Array	['ux-bg-grey5']	组件外层自定义样式
fontSize	String	28rpx	文本大小
iconWidth	String	60rpx	搜索图标宽度
iconFontSize	String	30rpx	搜索图标尺寸
inputHeight	String	30rpx	搜索框高度
inputFontSize	String	26rpx	搜索文本大小
placeholder	String	关键字	搜索框提示文本
placeholderClass	String	''	placeholder 自定义样式类 [ 不支持 nvue ]
kwd	String	空字符	默认搜索关键字
borderRadius	String	60rpx	组件圆角尺寸
disabled	Boolean	false	输入框是否被禁用
focus	Boolean	false	是否自动聚焦
clearBtn	Boolean	true	是否展示清除关键字按钮
padding	String	15rpx 12rpx	组件内间距
inputColor	String	#353535	输入框文本颜色
iconColor	String	#BDBDBD	图标颜色
disabledColor	String	#999999	禁用时文本颜色

组件事件

@confirm : 确认按钮点击后的确认事件，携带输入内容;
@inputting : 键盘输入时激活的事件，携带输入内容;
@clear : 关键字清空时激活的事件;
@tap: 组件被点击时触发的事件;

演示代码

<template>
	<view class="ux-body">
		<text class="ux-h6 ux-color-grey ux-mt-large">默认属性</text>
		<view style="padding:20rpx 0;">
			<ux-search-bar 
			@inputting="inputting" 
			@confirm="confirm" 
			@clear="clear"></ux-search-bar>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">禁用模式</text>
		<view style="padding:20rpx 0;">
			<ux-search-bar 
			:customClass="['ux-bg-primary']" 
			icon-color="#FFFFFF" 
			disabled-color="#FFFFFF" 
			@tap="tapme" 
			:disabled="true"></ux-search-bar>
		</view>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			
		}
	},
	methods: {
		// 监听输入
		inputting : function(e:string){
			console.log(e);
		},
		// 监听提交
		confirm : function (e:string) {
			console.log(e);
		},
		// 监听点击
		tapme:function(){
			uni.showToast({
				icon:"none",
				title:"被点了...."
			});
		},
		clear : function(){
			uni.showToast({
				icon:"none",
				title:"关键字被清空"
			});
		}
	}
}
</script>
<style scoped>
</style>