---
name: Picker
title: 选择器
category: 表单组件
owner: 郭勇
---

## 示例

```atom 基础示例

<template>
    <view>
        <view class="title">时间选择</view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                id="section1" 
                mode="time" 
                start="1:11"
                end="22:50"
                :value="time" 
                @change="timeChange"
                @cancel="cancel">
                <text class="picker">
                    {{time}}
                </text>
            </picker>
        </view>
        <view class="title">日期选择</view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                id="section2" 
                mode="date" 
                fields="day"
                start="2001-02-12"
                end="2019-03-15"
                :value="dateDay" 
                @change="dateChangeDay"
                @cancel="cancel">
                <text>
                    {{dateDay}}
                </text>
            </picker>
        </view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                id="section3" 
                mode="date" 
                fields="month"
                :value="dateMonth"
                @change="dateChangeMonth"
                @cancel="cancel">
                <text>
                    {{dateMonth}}
                </text>
            </picker>
        </view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                id="section4" 
                mode="date"
                fields="year"
                :value="dateYear"
                @change="dateChangeYear"
                @cancel="cancel">
                <text>
                    {{dateYear}}
                </text>
            </picker>
        </view>
        <view class="title">地区选择(暂未实现)</view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                id="section5" 
                mode="region" 
                title="地区选择器"
                :custom-item="customItem"
                @change="regionChange"
                @cancel="cancel">
                <text class="picker">
                    {{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
                </text>
            </picker>
        </view>
        <view class="title">单列选择器</view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                title="普通选择器"
                mode="selector" 
                :value="index" 
                :range="array" 
                @change="selectorChange" 
                @cancel="cancel">
                <text class="picker">
                    {{array[index]}}
                </text>
            </picker>
        </view>
        <view class="title">多列选择器</view>
        <view>
            <view class="section-title">当前选择</view>
            <picker 
                mode="multiSelector"  
                :value="multiIndex" 
                :range="multiArray" title="多列选择器"
                @change="multiPickerChange"
                @cancel="cancel"
                @columnchange="multiPickerColumnChange">
                <text class="picker">
                    {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}},{{multiArray[3][multiIndex[3]]}}
                </text>
            </picker>
        </view>
    </view>
</template>

<script type="config">
    {
        components: {
            'view': 'components/View/View',
            'text': 'components/Text/Text',
            'picker': 'components/Picker/Picker'
        },
        data: {
            time: '12:58',
            dateDay: '2018-01-05',
            dateMonth: '2018-01',
            dateYear: '2018',
            index: 1,
            array: ['科目一', '科目二', '科目三', '科目四'],
            multiIndex: [0, 0, 0, 0],
            multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫'], ['猪肉绦虫', '吸血虫']],
            regionData: ['全部', '全部', '全部'],
            customItem: '全部'
        }
    }
</script>

<script>
    export default {
        methods: {
            cancel(e) {
                console.log('cancel');
            },
            timeChange(e) {
                console.log('picker-time changed，值为', e.detail.value);
                this.time = e.detail.value;
            },
            dateChangeDay(e) {
                console.log('picker-date changed，值为', e.detail.value);
                this.dateDay = e.detail.value;
            },
            dateChangeMonth(e) {
                console.log('picker-date changed，值为', e.detail.value);
                this.dateMonth = e.detail.value;
            },
            dateChangeYear(e) {
                console.log('picker-date changed，值为', e.detail.value);
                this.dateYear = e.detail.value;
            },
            regionChange(e) {
                this.regionData = e.detail.value;
                console.log('picker-time changed，值为', e.detail.value);
            },
            selectorChange: function (e) {
                console.log('picker-selector changed，值为', e.detail.value)
                this.index = e.detail.value;
            },

            multiPickerChange: function (e) {
                console.log('picker-multiSelector changed，值为', e.detail.value)
                this.multiIndex = e.detail.value;
            },

            multiPickerColumnChange: function (e) {
                console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
                var data = {
                    multiArray: this.multiArray,
                    multiIndex: this.multiIndex
                };
                data.multiIndex[e.detail.column] = e.detail.value;
                switch (e.detail.column) {
                    case 0:
                        switch (data.multiIndex[0]) {
                            case 0:
                                data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                break;
                            case 1:
                                data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                                data.multiArray[2] = ['鲫鱼', '带鱼'];
                                break;
                        }
                        data.multiIndex[1] = 0;
                        data.multiIndex[2] = 0;
                        break;
                    case 1:
                        switch (data.multiIndex[0]) {
                            case 0:
                                switch (data.multiIndex[1]) {
                                    case 0:
                                        data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                        break;
                                    case 1:
                                        data.multiArray[2] = ['蛔虫'];
                                        break;
                                    case 2:
                                        data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                                        break;
                                    case 3:
                                        data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                        break;
                                    case 4:
                                        data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                        break;
                                }
                                break;
                            case 1:
                                switch (data.multiIndex[1]) {
                                    case 0:
                                        data.multiArray[2] = ['鲫鱼', '带鱼'];
                                        break;
                                    case 1:
                                        data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                        break;
                                    case 2:
                                        data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                        break;
                                }
                                break;
                        }
                        data.multiIndex[2] = 0;
                        break;
                }
                this.multiArray = [];
                this.multiIndex = [];
                this.multiArray = data.multiArray;
                this.multiIndex = data.multiIndex;
            }
        }
    }
</script>

<style scoped>
.section-title {
    display: inline-block;
    margin-right: 10px;
}
</style>

```

## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
name | string |  | 可选 | 表单元素名称 | -
mode | string | selector | 可选 | 选择器类型：<br>time(时间选择器)<br>date(日期选择器)<br>selector(普通选择器)<br>multiSelector(多列选择器)<br>region(省市区选择器)&nbsp;暂未实现 | -
value | string \| number \| array | - | 可选 | 选中的值，或者选中的index | -
title | string |  | 可选 | 选择器标题 | -
start | string | - | 可选 | 表示有效时间/日期范围的开始，仅time/date&nbsp;类型有效 | -
end | string | - | 可选 | 表示有效时间/日期范围的结束，仅time/date&nbsp;类型有效 | -
fields | string | day | 可选 | 选择器的粒度，仅date&nbsp;类型有效,&nbsp;有效值&nbsp;year、&nbsp;month、&nbsp;day | -
range | array | [] | 可选 | 选项列表，仅&nbsp;selector/multiSelector类型有效 | -
rangeKey | string | - | 可选 | 选项列表对象的key，仅&nbsp;selector/multiSelector类型且range&nbsp;为Array&nbsp;Object时有效， | -
disabled | boolean | false | 可选 | 是否禁用 | -

### Slots



名称 | 描述
--- | ---
default | default&nbsp;slot

### Events


- **columnchange**: 多列选择器每一列发生变化.

名称 | 类型 | 描述
--- | --- | ---
${param1} | object | -
  ${param1}.detail | object | -
  ${param1}.detail.column | number | 发生变化的列
  ${param1}.detail.value | number | 对应列选择的index

- **change**: 选择器值发生变化，新值和旧值相等也会触发.

名称 | 类型 | 描述
--- | --- | ---
${param1} | object | -
  ${param1}.detail | object | -
  ${param1}.detail.value | string \| array | selector返回选中index，multiSelector返回数组对应range的index，其他返回值

- **cancel**: 取消.
	无参数