# Picker 选择器

### 介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与弹出层组件配合使用。

### 引入

```js
import yPicker from "yesaway-wui/src/components/yPicker";
```

## 代码演示

### 基础用法
Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包含字符串或对象的数组。
通过`visible-item-count`控制可见的选项个数。
```html
<y-picker : columns="list" :visible-item-count="5" v-model="r3"></y-picker>
```
###单列选择
`columns` 属性可以通过对象数组的形式配置选项数据。
```html
<y-picker : columns="columns1" :visible-item-count="5" v-model="r3"></y-picker>
```
```html
export default {
    data(){
        return {
            columns1: ['周一', '周二', '周三', '周四', '周五'],
            columns2: [
                {
                    value: "广州",
                    key: "guangzhou"
                },
                {
                    value: "杭州",
                    key: "hangzhou"
                },
                {
                    value: "宁波",
                    key: "ningbo"
                },
            ],
        }
    }
}
```
当传入的数组对象值如下时，可实现双项或多项选择，通过`className`为对应列添加额外的类名
```html
export default {
    data(){
        return {
            columns1: [
                {
                    values: [
                        {
                            value: "广州",
                            key: "guangzhou"
                        },
                        {
                            value: "杭州",
                            key: "hangzhou"
                        },
                        {
                            value: "湖州",
                            key: "chaozhou"
                        },
                    ],
                    className:"a1"
                },
                {
                    values: ["广东", '广西', '浙江', '青海', '四川', '甘肃', '河北', '内蒙古', '黑龙江', '吉林'],
                    className:"a2"
                }
            ],
        }
    }
}
```

### 级联选择
使用 `columns` 的 `children` 字段可以实现选项级联的效果。
```html
<y-picker : columns="list" :visible-item-count="5" v-model="r3"></y-picker>
```
```html
export default {
    data(){
        return {
            list: [{
                values:[{
                    value: "广东",
                    key: "广东",
                    children:[{
                        key:"广东1",
                        value:"广东1",
                        children:[{
                            key:"广东1-1",
                            value:"广东1-1"
                        },{
                            key:"广东1-2",
                            value:"广东1-2"
                        },]
                    },{
                        key:"广东2",
                        value:"广东2",
                        children:[{
                            key:"广东2-1",
                            value:"广东2-1"
                        },{
                            key:"广东2-2",
                            value:"广东-2"
                        }]
                    }]
                },{
                    value: "广西",
                    key: "广西",
                    children:[{
                        key:"广西",
                        value:"广西",
                        children:[{
                            key:"广西-1",
                            value:"广西-1"
                        },{
                            key:"广西-2",
                            value:"广西-2"
                        }]
                    },{
                        key:"广西1",
                        value:"广西1",
                        children:[{
                            key:"广西1-1",
                            value:"广西1-1"
                        },{
                            key:"广西1-2",
                            value:"广西1-2"
                        }]
                    }]
                }]
            }]
        }
    }
}
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| columns | 对象数组，配置每一列显示的数据 | _Column[]_ | [] |
| value-key | 选项对象中，选项文字对应的键名 | _string_ | --- |
| visible-item-count | 可见的选项个数 | _number\string_ | 5 |
| check-color | 选中项字体颜色 | _string_ | --- |
| cursor-class | 额外类名 | _string_ | --- |
| item-height | 单个选项高度 | _number_ | --- |
| item-size | 单个选项预设高度，可选值为`normal small` | _string_ | _normal_ |


### Events

| 事件名     | 说明                                     | 回调参数            |
| ---------- | ---------------------------------------- | ------------------- |
| update:valueKey      | 选项变化时时触发 | valueKey |