## 搜索框组件
保险师搜索框组件,行为基本上以 Vant 组件库搜索组件为范本，目前不支持搜索结果、常用搜索建议、搜索历史、分词等等

点击左边搜索icon和键盘enter回车都可进行搜索

### Import
```js
import { Search } from 'bxs-ui-vue';
```

### Example
```html
<h1>基础用法</h1>
<bxs-search
  v-model="value"
  placeholder="请输入关键字"
  @search="onSearch"
  />
<h1>监听对应事件（配置公共历史搜索记录）</h1>
<bxs-search
  v-model="value"
  placeholder="请输入关键字"
  show-action
  history
  @search="onSearch"
  @clear="onClear"
  @keypress="onKeyPress"
  @cancel="onCancel"
  />
<h1>自定义行动按钮（配置交易模块历史搜索记录）</h1>
<bxs-search
  v-model="value"
  show-action
  history="trade"
  @search="onSearch"
  @clear="onClear"
  @keypress="onKeyPress"
  @cancel="onCancel"
  @focus="onFocus"
  >
  <div 
    slot="action" 
    slot-scope="fn"
    @click="onSearch(fn)"
    >
    搜索
  </div>
</bxs-search>

```
```js
import { Search } from 'bxs-ui-vue';
export default {
  data () {
    return {
      value: '',
      inputText: '',
      keypressText:''
    }
  },
  methods: {
    onSearch(o) {
      // 执行用户搜索行为
      this.inputText = `搜索中..${this.value}`
      this.keypressText = ''
      if (o && o.addHistory) {
        // 添加历史搜索记录
        o.addHistory(true)
      }
    },
    onInput() {
      this.inputText = `输入中..${this.value}`
    },
    onFocus() {
      this.inputText = `得到焦点..${this.value}`
    },
    onCancel() {
      this.inputText = '取消 cancel'
      this.keypressText = ''
      this.value = ''
    },
    onClear() {
      this.inputText = '清空 clear'
      this.keypressText = ''
      this.value = ''
    },
    onKeyPress(ev) {
      this.keypressText = ev.code
      this.inputText = this.value
    }
  }
}
```

## **API**
Search 目前支持 Input 标签的原生属性有 placeholder

| 属性 | 说明 | 类型 | 默认值 |
| ------ | ------ | ------ | ------ |
| placeholder | 搜索框默认提示文字 | String | 请输入搜索关键字 |
| background | 搜索框背景色 | String | #f2f2f2 |
| show-action | 是否在搜索框右侧显示取消按钮和自定义按钮 |  Boolean | false |
| disabled | 是否禁用输入框 |  Boolean | false |
| history | 配置搜索历史记录，可配置专属历史记录；默认为公共历史记录 |  String | 'common' |

## **Event**
Search 目前支持 Input 标签的原生事件有 focus,blur,input

| 事件名 | 说明 | 参数 |
| ------ | ------ | ------ |
| input | 监听输入框输入动作 | value (可通过当前组件value值获取，调用时可不必代入。具体参考Example) |
| search | 搜索执行动作 |  - |
| clear | 点击清除按钮后触发动作 | - |
| focus | 搜索框得到焦点时动作 | - |
| blur | 搜索框失去焦点时动作 | - |
| keypress | 搜索框键盘输入时动作 | event(键盘输入事件) |

## **Slot**
具名插槽
| 名称 | 说明 |
| ------ | ------ |
| action | 自定义搜索框右侧按钮，需要在showAction为 true 时才会显示 |
补充说明：当配置有历史记录功能时，如果配置了插槽（slot='action'）,搜索组件会向父组件调用者注入内容为 {addHistory:Function} 的 scope，addHistory 添加历史搜索记录的方法，参数为true（用于关闭历史记录弹层）。
