<template>

     <view>

         <view class="uni-title uni-common-pl">地区选择器</view>

         <view class="uni-list">

             <view class="uni-list-cell">

                 <view class="uni-list-cell-db">

                     <picker @change="bindPickerChange" :value="index" :range="array">

                         <view class="uni-input">{{array[index]}}</view>

                     </picker>

                 </view>

             </view>

         </view>

         <view class="uni-title uni-common-pl">地区选择器(普通Json数组)</view>

         <view class="uni-list">

             <view class="uni-list-cell">

                 <view class="uni-list-cell-db">

                     <picker @change="bindPickerChanges" range-key="name" :data-index="22" :data-id="objectArray[index].id" :value="index" :range="objectArray">

                        <view class="uni-input">{{objectArray[index].name}}</view>

                        <!-- 还是建议用input保存,可能picker更新不及时 -->

                        <input type="text" :value="objectArray[index].id" hidden/>

                    </picker>

                 </view>

             </view>

         </view>

         <view class="uni-title uni-common-pl">时间选择器</view>

         <view class="uni-list">

             <view class="uni-list-cell">

                 <view class="uni-list-cell-db">

                     <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">

                         <view class="uni-input">{{time}}</view>

                     </picker>

                 </view>

             </view>

         </view>

         <view class="uni-title uni-common-pl">日期选择器</view>

         <view class="uni-list">

             <view class="uni-list-cell">

                 <view class="uni-list-cell-db">

                     <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">

                         <view class="uni-input">{{date}}</view>

                     </picker>

                 </view>

             </view>

         </view>

     </view>

 </template>

 <script>

     export default {

         data() {

             const currentDate = this.getDate({

                 format: true

             })

             return {

                 title: 'picker',

                 array: ['中国', '美国', '巴西', '日本'],

                 objectArray: [{

                         id: 11,

                         name: '中国'

                     },

                     {

                         id: 12,

                         name: '美国'

                     },

                     {

                         id: 13,

                         name: '德国'

                     },

                     {

                         id: 14,

                         name: '法国'

                     }

                 ],

                 index: 0,

                 date: currentDate,

                 time: '12:01'

             }

         },

         computed: {

             startDate() {

                 return this.getDate('start');

             },

             endDate() {

                 return this.getDate('end');

             }

         },

         methods: {

             bindPickerChange: function(e) {

                 console.log('picker发送选择改变，携带值为', e.target.value)

                 this.index = e.target.value

             },

             bindPickerChanges: function(e) {

                 this.index = e.detail.value

                 console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'\n默认传过来的是下标：',e.detail.value,'\n也可以传普通json传过来的id等：',e.currentTarget.dataset.id);

             },

             bindDateChange: function(e) {

                 this.date = e.target.value

             },

             bindTimeChange: function(e) {

                 this.time = e.target.value

             },

             getDate(type) {

                 const date = new Date();

                 let year = date.getFullYear();

                 let month = date.getMonth() + 1;

                 let day = date.getDate();

                 if (type === 'start') {

                     year = year - 60;

                 } else if (type === 'end') {

                     year = year + 2;

                 }

                 month = month > 9 ? month : '0' + month;;

                 day = day > 9 ? day : '0' + day;

                 return `${year}-${month}-${day}`;

             }

         }

     }

 </script>