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="20px" placeholder="搜索" disabled @click="handleClick"></tui-searchbar>

<!--微信小程序-->
<tui-searchbar radius="20px" placeholder="搜索" disabled bindclick="handleClick"></tui-searchbar>

Slots

none

Props

参数	类型	说明	默认值
backgroundColor	String	搜索栏背景色	#ededed
padding	String	搜索栏padding值	8px 10px
height	String	输入框框高度	36px
radius	String	设置圆角	4px
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

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

预览

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

线上程序扫码预览

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