uniapp - picker

【普通json数组】

针对官方的普通json数组示例，做些填充

 <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>