# Search 搜索框

[toc]

此组件可以满足日常的搜索功能，同时可以和下拉组件结合进行搜索。

## 组件引入

在`app.json`或页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-navbar": "../../dist/search/index"
  }
}
```

## 用法

-   基础用法

```html
<tea-search placeholder="默认提示文案" value="小程序"></tea-search>
```

-   禁用状态

```html
<tea-search placeholder="默认提示文案" value="小程序" disabled></tea-search>
```

-   显示取消按钮

```html
<tea-search placeholder="默认提示文案" showCancel></tea-search>
```

-   引入外部样式

```html
<tea-search placeholder="默认提示文案" showCancel class="search" ext-class="gray"></tea-search>
```

-   不显示搜索图标

```html
<tea-search placeholder="默认提示文案" showCancel class="search" noSearchIcon></tea-search>
```

-   指定图标的颜色

```html
<tea-search placeholder="默认提示文案" showCancel class="search" iconColor="#999"></tea-search>
```

-   事件绑定

```html
<tea-search placeholder="默认提示文案" showCancel bind:search="search" bind:cancel="cancel"></tea-search>
```

-   与下拉选择结合的搜索框

```html
<tea-select placeholder="请选择" groups="{{ groups_a }}" bind:select="select" search searchPlaceholder="搜索"></tea-select>
```

## Props

| 参数           | 描述        | 类型        | 默认值     |
| ------------ | --------- | --------- | ------- |
| value        | 传入的值      | `String`  | -       |
| placeholder  | 占位文字      | `String`  | `请输入`   |
| showCancel   | 显示取消按钮    | `Boolean` | `false` |
| noSearchIcon | 不显示搜索图标   | `Boolean` | `false` |
| iconColor    | 指定搜索图标的颜色 | `String`  | `#444`  |
| disabled     | 是否禁用      | `Boolean` | `false` |
| focus        | 是否自动获取焦点  | `Boolean` | `false` |

## 事件

| 事件名    | 描述          | 回调参数      |
| ------ | ----------- | --------- |
| search | 点击键盘上的完成时触发 | 标注符和搜索字符串 |
| cancel | 点击取消按钮时触发   | -         |
| reset  | 点击清除按钮时触发   | -         |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                           | 默认值                     | 描述  |
| ----------------------------- | ----------------------- | --- |
| search-icon-margin            | 15px                    | -   |
| search-border-color           | #e5e5e5                 | -   |
| search-tags-text-color        | @text-color             | -   |
| search-tags-border-color      | @text-color             | -   |
| search-tags-text-size         | @font-size-sm           | -   |
| search-tags-padding-right     | 10px                    | -   |
| search-tags-margin-right      | 10px                    | -   |
| search-tags-icon-next-size    | 18px                    | -   |
| search-text-size              | @font-size-default      | -   |
| search-cancel-text-color      | @color-link             | -   |
| search-cancel-margin-left     | 10px                    | -   |
| search-reset-margin-left      | 10px                    | -   |
| search-placeholder-text-color | @text-placeholder-color | -   |