uniapp - picker

 

【普通json数组】

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

 

  1 <template>
  2     <view>
  3         <view class="uni-title uni-common-pl">地区选择器</view>
  4         <view class="uni-list">
  5             <view class="uni-list-cell">
  6                 <view class="uni-list-cell-db">
  7                     <picker @change="bindPickerChange" :value="index" :range="array">
  8                         <view class="uni-input">{{array[index]}}</view>
  9                     </picker>
 10                 </view>
 11             </view>
 12         </view>
 13 
 14         <view class="uni-title uni-common-pl">地区选择器(普通Json数组)</view>
 15         <view class="uni-list">
 16             <view class="uni-list-cell">
 17                 <view class="uni-list-cell-db">
 18                     <picker @change="bindPickerChanges" range-key="name" :data-index="22" :data-id="objectArray[index].id" :value="index" :range="objectArray">
 19                        <view class="uni-input">{{objectArray[index].name}}</view>
 20                        <!-- 还是建议用input保存,可能picker更新不及时 -->
 21                        <input type="text" :value="objectArray[index].id" hidden/>
 22                    </picker>
 23                 </view>
 24             </view>
 25         </view>
 26 
 27         <view class="uni-title uni-common-pl">时间选择器</view>
 28         <view class="uni-list">
 29             <view class="uni-list-cell">
 30                 <view class="uni-list-cell-db">
 31                     <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
 32                         <view class="uni-input">{{time}}</view>
 33                     </picker>
 34                 </view>
 35             </view>
 36         </view>
 37 
 38         <view class="uni-title uni-common-pl">日期选择器</view>
 39         <view class="uni-list">
 40             <view class="uni-list-cell">
 41                 <view class="uni-list-cell-db">
 42                     <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
 43                         <view class="uni-input">{{date}}</view>
 44                     </picker>
 45                 </view>
 46             </view>
 47         </view>
 48     </view>
 49 </template>
 50 
 51 <script>
 52     export default {
 53         data() {
 54             const currentDate = this.getDate({
 55                 format: true
 56             })
 57             return {
 58                 title: 'picker',
 59                 array: ['中国', '美国', '巴西', '日本'],
 60                 objectArray: [{
 61                         id: 11,
 62                         name: '中国'
 63                     },
 64                     {
 65                         id: 12,
 66                         name: '美国'
 67                     },
 68                     {
 69                         id: 13,
 70                         name: '德国'
 71                     },
 72                     {
 73                         id: 14,
 74                         name: '法国'
 75                     }
 76                 ],
 77                 index: 0,
 78                 date: currentDate,
 79                 time: '12:01'
 80             }
 81         },
 82         computed: {
 83             startDate() {
 84                 return this.getDate('start');
 85             },
 86             endDate() {
 87                 return this.getDate('end');
 88             }
 89         },
 90         methods: {
 91             bindPickerChange: function(e) {
 92                 console.log('picker发送选择改变，携带值为', e.target.value)
 93                 this.index = e.target.value
 94             },
 95             bindPickerChanges: function(e) {
 96                 this.index = e.detail.value
 97                 console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'\n默认传过来的是下标：',e.detail.value,'\n也可以传普通json传过来的id等：',e.currentTarget.dataset.id);
 98             },
 99             bindDateChange: function(e) {
100                 this.date = e.target.value
101             },
102             bindTimeChange: function(e) {
103                 this.time = e.target.value
104             },
105             getDate(type) {
106                 const date = new Date();
107                 let year = date.getFullYear();
108                 let month = date.getMonth() + 1;
109                 let day = date.getDate();
110 
111                 if (type === 'start') {
112                     year = year - 60;
113                 } else if (type === 'end') {
114                     year = year + 2;
115                 }
116                 month = month > 9 ? month : '0' + month;;
117                 day = day > 9 ? day : '0' + day;
118                 return `${year}-${month}-${day}`;
119             }
120         }
121     }
122 </script>

 

posted @ 2019-07-12 11:44  Sunsin  阅读(15814)  评论(0)  编辑  收藏  举报