## 基础滚轮选择器（1-3列/5列）

Picker是指提供多个选项集合供用户选择其中一项的控件。Picker展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。


## Picker组件

### Import
```js
import { Picker } from 'bxs-ui-vue';
```
或
```js
import Vue from 'vue'
import { Picker } from 'bxs-ui-vue'
Vue.use(Picker);
```

### Example

#### 一、基本用法

```html
  <bxs-picker @change="change" :value="picker" ref="picker01" :picker-data="pickerData" :title="title"></bxs-picker>
```
```js
data() {
    return {
       title:'基础滚轮选择器',
       pickerData:['杭州', '宁波', '温州', '嘉兴', '湖州'],
       picker:['宁波']
    }
},
methods: {
    change(picker,val){
        console.log('val',val)
    },
    setChangValue(){
      //设置值
      this.$refs.picker01.setValues(['温州'])
    }
},
created(){
},
components: {
  [Picker.name]: Picker,
}
```

#### 二、多列联动

```html
<bxs-picker  @change="onChange" :picker-data="pickerData" ref="picker01" :value="pickerValue" :title="title"></bxs-picker>
```

```javascript
const cities = {
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
};

export default {
  data() {
    return {
      title:'基础滚轮选择器',
      pickerData: [
        {
          values: Object.keys(cities),
          className: 'column1'
        },
        {
          values: cities['浙江'],
          className: 'column2',
          defaultIndex: 2
        }
      ],
      pickerValue:['浙江', '宁波'], //初始化数据
    };
  },
  methods: {
    onChange(picker, values) {
      picker.setColumnValues(1, cities[values[0]]);
    },
    setChangValue(){
      //设置值
      this.$refs.picker01.setValues(['浙江', '宁波'])
    }
  },
  created(){
  },
};
```
#### 三、弹框浮层展示picker

```html
<button type="button" @click="popPicker">展示</button>
```
```javascript
  data() {
    return {
      citys:['杭州', '宁波', '温州', '嘉兴', '湖州'],
      defaultValue:['温州']
    }
  },
  methods: {
    popPicker(){
      this.$picker({
        title: 'picker标题',
        defaultValue:this.defaultValue,
        pickerData: this.citys,
        callback(backInfo) {
           console.log(backInfo)
        },
      })
    }
  }

```
### Attributes

| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| title | 浮层的标题 | String |  '' |
| valueKey | 传递数据里面展示的数据key值 | String |  text |
| pickerData | 传递数据集合 | Array |  [] |
| showToolbar  | 可选,列表投保展示是否隐藏,默认不隐藏 | Boolean |  false |
| value | 可选,列表的默认绑定数据,如果后选项里没有匹配的值，就默认为第一项 | Array |  [''] |

### Event

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 可选,点击确定按钮的回调事件 | 当前选择的数据，当前选择的数据在数组中的位置index值 |
| change | 可选,当前某一列滚动之后返回的回调事件 | 当前滚动某一列选择的数据，当前滚动的某一列选择的数据在数组中的位置index值 |

### pickerData 数据结构

当传入多列数据时，`pickerData`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`

| key | 说明 |
|------|------|
| values | 列中对应的备选值 |
| defaultValue | 初始选中项的索引，各列选中的（valueKey 字段对应的）值构成的数组，比如多列数据[{'text':’mode1‘,value:'value2'},{'text':’mode3‘,value:'value4'}] 则 defaultValue 为 ['value2','value4']|
| className | 为对应列添加额外的`class` |


### 方法

通过 ref 可以获取到 picker 实例并调用实例方法

| 方法名 | 参数 | 返回值 | 介绍 |
|------|------|------|------|
| getValues | - | values | 获取所有列选中的值 |
| setValues | values | - | 设置所有列选中的值 |
| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
| setIndexes | indexes | - | 设置所有列选中值对应的索引 |
| getColumnValue | columnIndex | value | 获取对应列选中的值 |
| setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
| getColumnValues | columnIndex | values | 获取对应列中所有选项 |
| setColumnValues | columnIndex, values | - | 设置对应列中所有选项 |
