tui-searchbar 搜索栏 会员组件

介绍

搜索栏：可设置圆角，高度，颜色等。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiSearchbar from "@/components/thorui/tui-searchbar/tui-searchbar.vue"
export default {
	components:{
		tuiSearchbar
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-searchbar": "/components/thorui/tui-searchbar/tui-searchbar"
  }
}

代码演示

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

基础使用

<tui-searchbar></tui-searchbar>

禁用状态

通过 disabled 属性设置是否禁用input框，radius 属性设置圆角值。

<!--uni-app-->
<tui-searchbar radius="40rpx" placeholder="搜索" disabled></tui-searchbar>

<!--微信小程序-->
<tui-searchbar radius="40rpx" placeholder="搜索" disabled></tui-searchbar>

Slots

插槽名称	说明
default V2.9.0+	搜索框左侧自定义内容

Props

属性名	类型	说明	默认值
backgroundColor	String	搜索栏背景色	#ededed
padding	String	搜索栏padding值	16rpx 20rpx
height	String	输入框框高度	72rpx
radius	String	设置圆角	8rpx
inputBgColor	String	输入框框背景色	#fff
focus	Boolean	获取焦点	false
placeholder	String	placeholder值	请输入搜索关键词
value	String	输入框 value值	-
disabled	Boolean	输入框是否禁用	false
cancelText	String	取消搜索按钮文本	取消
cancelColor	String	取消按钮文本颜色	#888
cancel	Boolean	是否需要取消按钮	true
searchText	String	搜索按钮文本	搜索
searchColor	String	搜索按钮文本颜色	#5677fc
showLabelV1.7.1	Boolean	是否显示占位标签	*true
showInputV1.7.1	Boolean	是否显示输入框	true

Events

注：uni-app端绑定事件使用@前缀，如@search；微信小程序原生使用bind前缀，如bindsearch

事件名	说明	回调参数
clear	清空输入框框文本事件，点击清除图标时触发	-
focus	输入框聚焦时触发	event.detail = { value, height }，height 为键盘高度
blur	输入框失去焦点时触发	event.detail = {value: value}
click	搜索栏点击事件	{ }
cancel	取消搜索事件，点击取消按钮时触发	{ }
input	输入框input事件	event.detail = {value}
search	搜索事件，点击搜索按钮时触发	{ value: 搜索关键词 }

Methods

温馨提示：方法调用请看文档：【进阶用法 -> 组件实例方法】或者参考示例程序。

方法名	说明	传入参数
reset V2.2.0+	重置组件	-

预览

请以移动端效果为准，touch事件目前尚未完全在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码