# Search 搜索
# 介绍
搜索框
# 使用指南
# 一般用法
<tms-search bind:confirm="onSearch" bind:content-change="onInputChange" bind:focus="onFocus"/>
# 自定义样式搜索框
<tms-search input-style="border:0.5px solid gray;"/>
# 自定义搜索图标
<tms-search left-icon="ICON_IMAGE"/>
# 无背景色模式
<tms-search hide-background/>
# 禁用
<tms-search disabled/>
# 隐藏消除图标
<tms-search clearable="{{false}}"/>
# 文字居中
<tms-search textAlign="center"/>
# 隐藏右侧文字
<tms-search actionText=""/>
# 自定义右侧文字
<tms-search actionText="取消"/>
# API
有部分API继承自微信官方input组件，请查看 微信官方文档 (opens new window) 了解更多。
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| placeholder | 占位符 | string | '' | |
| custom-value | 搜索框内容 | string | '' | |
| input-style | 自定义样式 | string | '' | |
| action-text | 右侧文字 | string | '取消' | |
| disabled | 是否禁用 | boolean | false | |
| text-align | 文本对齐方向 | string | 'left' | |
| placeholder-style | 占位符样式，参考微信官方文档 | string | '' | |
| max-length | 最大长度 | number | -1 | |
| clearable | 是否显示清除图标 | boolean | true | |
| hide-background | 无背景模式 | boolean | false |
# EVENTS
有部分API继承自微信官方input组件，请查看 微信官方文档 (opens new window) 了解更多。
| 属性 | 说明 | 类型 |
|---|---|---|
| bind:confirm | 键盘搜索事件 | (event) => {} |
| bind:action | 点击右侧按钮事件 | (event) => {} |
| bind:on-click-left-icon | 点击左侧图标事件 | (event) => {} |
| bind:clear-input | 点击清除按钮事件 | (event) => {} |
| bind:content-change | 输入框内容变化时调用 | (event) => {} |
| bind:click | 点击输入框内容区域事件 | (event) => {} |
| bind:blur | 请查看微信官方文档 | (event) => {} |
| bind:focus | 请查看微信官方文档 | (event) => {} |
| bind:keyboardheightchange | 请查看微信官方文档 | (event) => {} |
# CSS变量
// 无背景模式边框
--search-full-mode-border: 0;
// 无背景模式聚焦时边框
--search-full-mode-focus-border: 0;
// 禁用状态透明度
--search-disable-opacity: .6;
// 文本颜色
--search-text-color: #333333;
// 内容高度
--search-content-height: 76rpx;
// 无背景模式内容高度
--search-full-mode-content-height: 100rpx;
// 占位符文本颜色
--search-placeholder-text-color: #BFC0C3;
// 左侧图标大小
--search-left-icon-size: 50rpx;
// 消除图标大小
--search-clear-icon-size: 30rpx;
