drip-ui/packages/picker/zh-CN.md

Lightweight Mobile UI Components built on Vue

## Picker 选择器

### 使用指南
``` javascript
import { Picker } from 'drip-ui';

Vue.use(Picker);
```

### 代码演示

```html
<drip-button @click="showPop(1)">正常picker</drip-button>
<drip-button @click="showPop(2)">二级picker</drip-button>
<drip-button @click="showPop(3)">三级picker</drip-button>
<drip-popup
  v-model="popup.show"
  :title="'piker'"
  position="bottom">
  <div>
    <drip-picker
      v-if="popup.type === 1"
      :slots="bankList"
      value-key="name" // name要与slots中values的key值对应
      @change="onValuesChange">
    </drip-picker>
  </div>

  <div>
    <drip-picker
      v-if="popup.type === 2"
      :slots="list2"
      value-key="name"
      @change="onValuesChange">
    </drip-picker>
  </div>

  <div>
    <drip-picker
      v-if="popup.type === 3"
      :slots="list3"
      @change="onValuesChange">
    </drip-picker>
  </div>
</drip-popup>
```

```javascript
data () {
  return {
    popup: {
      show: false,
      type: ''
    },
    bankList: [{
      flex: 1,
      defaultIndex: 1,
      values: [{
        name: '111',
        value: 111
      }, {
        name: '222',
        value: 222
      }, {
        name: '333',
        value: 333
      }, {
        name: '444',
        value: 444
      }, {
        name: '555',
        value: 555
      }, {
        name: '666',
        value: 666
      }],
      textAlign: 'center'
    }],
    list2: [
      {
        flex: 1,
        values: [{name: '2010'}, {name: '2011'}, {name: '2012'}, {name: '2013'}, {name: '2014'}, {name: '2015'}],
        className: 'slot1',
        textAlign: 'right'
      }, {
        divider: true,
        content: '-',
        className: 'slot2'
      }, {
        flex: 1,
        values: [{name: '2010'}, {name: '2011'}, {name: '2012'}, {name: '2013'}, {name: '2014'}, {name: '2015'}],
        className: 'slot3',
        textAlign: 'left'
      }
    ],
    list3: [{
      flex: 1,
      values: ['2013', '2014', '2015', '2016', '2017', '2018']
    }, {
      flex: 1,
      values: ['2013', '2014', '2015', '2016', '2017', '2018']
    }, {
      flex: 1,
      values: ['2013', '2014', '2015', '2016', '2017', '2018']
    }]
  }
},
methods: {
  showPop (type) {
    this.popup = {
      type,
      show: true
    }
  },
  onValuesChange (picker, values) {
    console.log(values)
    if (values[0] && values[1]) {
      if (values[0].name > values[1].name) {
        picker.setSlotValue(1, values[0])
      }
    }
  }
}
```

### API

```javaScript
    // slots 格式如下
    [{
      flex: 1,
      defaultIndex: 1, // 默认选中values的第几个元素
      values: [{name: '', value: ''}], // 数据中对象格式可以任意定义
      textAlign: 'center' // 文字格式 不传默认是center
    }]
```

##### slots 格式如下

| 参数 | 说明 | 类型 | 默认值 |
| ---  | --- | --- | ---- |
| divider | 对应的对象是否是分隔符 | `Boolean` | false |
| content | 分隔符展示的文本 | `String` | |
| values | 选择的数组 | `Array` | |
| defaultIndex | 默认选中数组第几个元素 | `Number` | 0 |
| textAlign | 文本样式 | `String` | `center` |
| flex | flex 值 | `Number` | |
| className | 类名 | `String` | |

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| slots | picker 选择的内容 | 数组对象 | - |
| valueKey | 当前数据展示内容的key | `String` | - |
| checkKey | 检测当前数据是否变化的key | `String` | value 注：如果存入的数据不存在value值，则默认使用valueKey检测变化 |
| visibleItemCount | picker有几行数据 | `Number` 必须是奇数 | 5 |
| rotateEffect | 是否展示3D 效果 | `Boolean` | false |
| itemHeight | 每一行的高度 | `Number` | 36 |
| highlightHeight | 高亮处的高度 | `Number` | 50 |

### Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 数据变化时的监听事件 | - |

**在 change 事件中，可以使用注册到 picker 实例上的一些方法：**

* getSlotValue(index)：获取给定 slot 目前被选中的值
* setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
* getSlotValues(index)：获取给定 slot 的备选值数组
* setSlotValues(index, values)：设定给定 slot 的备选值数组
* getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
* setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中