# Autocomplete组件

### 介绍

Autocomplete组件；

### 引入

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

Vue.use(Select);
```

## 代码演示

### 基础用法
```html
<bgo-auto-complete
    v-model="name"
    data-source="custom"
    label="类型"
    :item="items" />
```

## API

### Props

| 名称 | 说明 | 类型 | 可选值 | 默认值 |   
| --- | --- | ---- | ----- | ----- |  
| v-model | 当前输入的值 | _number_ / _string_ / _array_ | - |  
| label | 表单的标签文本         | _string_ | - | - |  
| placeholder | 输入框占位文本 | _string_ | - | - |  
| required | 是否显示表单必填星号 | _boolean_ | `true` / `false` | `false` |  
| disabled | 是否禁用           | _boolean_ | `true` / `false` | `false` |  
| readonly | 是否只读           | _boolean_ | `true` / `false` | `false` |  
| hidden   | 是否隐藏           | _boolean_ | `true` / `false` | `false` |
| data-source | 数据源类型      | _string_ | `custom` / `dict` / `url` | - |  
| is-data-convert | 数据源数据是否需要转换 | _boolean_ | `true` / `false` | `true` |  
| item | 数据源对应的数据 | _string_ / _array_ | - | - |
| form-prop-rules | 表单验证规则 | _array_ | - | - |  
| clearable | 是否支持清除选中值 | _boolean_ | `true` / `false` | `false` |


* 注：`data-source`属性为：  
  1. “custom”时，`item`属性值为自定义的选项数组：如：
```json
[{
    "label":"选项1", 
    "value":"option1"
}, {
    "label": "选项2", 
    "value": "option2"
}]
```  
  2. “dict”时，`item`属性值为数据字典对应的URL地址；如: “/dict/item/YES_OR_NO”；   
     
  3. “url”时，`item`属性值为自定义源的URL地址。


### Events

| 事件                 | 说明                 | 回调参数                       |
| ------------------- | ------------------- | ----------------------------- |
| change              | 当绑定值变化时触发的事件 | _value: string_ / _any[]_     |