# HeaderNavBar 头部导航栏加搜索组件

### 介绍

头部导航栏加搜索组件（HeaderNavBar导航栏组件组件的基础上加搜索组件）。

### 引入

```js
import { Vue } from 'vue';
import { HeaderNavBarSearch } from '@bingoit/mobile-ui';

Vue.use(HeaderNavBarSearch);
```

## 代码演示

### 基础用法
```html
<bgo-header-nav-bar-search
    title="标题" 
    v-model="searchName" 
    search-placeholder="按名称搜索" 
    autofocus />
```

## API

### Props

| 名称 | 说明 | 类型 | 可选值 | 默认值 |   
| --- | --- | ---- | ----- | ----- |   
| v-model | 搜索框输入的值 | _number_ / _string_ / _array_ | - |
| title   |  | _string_ | - | - |
| left-text  | 左侧文案 | _boolean_ | `true` / `false` | `true` |  
| is-left-arrow | 是否显示左侧箭头  | _string_ | `spinner` / `circular` | `circular` |
| is-custom-back | 是否自定义处理返回功能 | _boolean_ | `true` / `false` | `false` |    
| is-back | 是否支持返回功能 | _boolean_ | `true` / `false` | `true` |    
| search-placeholder | 搜索输入框占位提示文字 | _string_ | - | - |    
| autofocus | 搜索输入框是否自动获取焦点 | _boolean_ | `true` / `false` | `false` |    


### Events

| 事件                 | 说明                 | 回调参数                       |
| ------------------- | ------------------- | ----------------------------- |
| back              | 当`is-custom-back`属性为`true`时，点击返回时触发 | _event: Event_              |