lighting-ui/packages/lc-picker/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-picker

 > Weex 选择器组件
 
### 规则
- 常用于单选或者级联选择



## [Demo](https://h5.m.taobao.com/trip/lc-picker/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-picker%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1WkKEhcLJ8KJjy0FnXXcFDpXa-562-1000.gif" width="240"/>&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1_9v9SpXXXXcuXXXXXXXXXXXX-200-200.png" width="160"/>

## 使用方法

```vue

<template>
  <div class="wxc-demo">
    <title title="lc-popup"></title>
    <category title="使用案例"></category>



    <lc-popup width="750"
                show="true"
                pos="bottom"
                height="470"
                ref="LcPopup"
                @LcPopupOverlayClicked="popupOverlayRightClick">

      <lc-picker ref="picker" :pickerData="pickerData" class="date-picker"></lc-picker>

    </lc-popup>

  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }
  .date-picker {
    width: 750px;
    height: 470px;
  }
</style>

<script>
  import { LcPopup, LcPicker } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
  import { setTitle } from '../_mods/set-nav';
  import Date from './date.js';

  export default {
    components: { Title, Category, LcPopup, LcPicker },
    data: () => ({
      pickerData: {
        columns: 3,
        data: Date.data
      }
    }),
    created () {
      setTitle('Picker');
    }
  };
</script>
```

### 可配置参数

| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`id`** | `String` | `N` | ` ` | `多个picker情况下，需要唯一id` |
| **`pickerData`** | `Object` | `N` | ` ` | `选择器内的数据` |
| **`selectedChange`** | `Function` | `N` | ` ` | `每次选择变化时的回调函数` |

### 事件回调

```
在lc-picker.$refs.picker.getSelectedIndex() 即可得到当前选择
```