# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码