You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
4.7 KiB
178 lines
4.7 KiB
<template>
|
|
<view>
|
|
<page-head :title="title"></page-head>
|
|
<view class="uni-title uni-common-pl">普通选择器</view>
|
|
<view class="uni-list">
|
|
<view class="uni-list-cell">
|
|
<view class="uni-list-cell-left">
|
|
当前选择
|
|
</view>
|
|
<view class="uni-list-cell-db">
|
|
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
|
|
<view class="uni-input">{{array[index].name}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- #ifndef MP-ALIPAY -->
|
|
<view class="uni-title uni-common-pl">多列选择器</view>
|
|
<view class="uni-list">
|
|
<view class="uni-list-cell">
|
|
<view class="uni-list-cell-left">
|
|
当前选择
|
|
</view>
|
|
<view class="uni-list-cell-db">
|
|
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
|
|
<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<view class="uni-title uni-common-pl">时间选择器</view>
|
|
<view class="uni-list">
|
|
<view class="uni-list-cell">
|
|
<view class="uni-list-cell-left">
|
|
当前选择
|
|
</view>
|
|
<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-picker-tips">
|
|
注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
|
|
</view>
|
|
|
|
<view class="uni-title uni-common-pl">日期选择器</view>
|
|
<view class="uni-list">
|
|
<view class="uni-list-cell">
|
|
<view class="uni-list-cell-left">
|
|
当前选择
|
|
</view>
|
|
<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 class="uni-picker-tips">
|
|
注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
function getDate(type) {
|
|
const date = new Date();
|
|
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
if (type === 'start') {
|
|
year = year - 10;
|
|
} else if (type === 'end') {
|
|
year = year + 10;
|
|
}
|
|
month = month > 9 ? month : '0' + month;;
|
|
day = day > 9 ? day : '0' + day;
|
|
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: 'picker',
|
|
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
|
|
index: 0,
|
|
multiArray: [
|
|
['亚洲', '欧洲'],
|
|
['中国', '日本'],
|
|
['北京', '上海', '广州']
|
|
],
|
|
multiIndex: [0, 0, 0],
|
|
date: getDate({
|
|
format: true
|
|
}),
|
|
startDate:getDate('start'),
|
|
endDate:getDate('end'),
|
|
time: '12:01'
|
|
}
|
|
},
|
|
methods: {
|
|
bindPickerChange: function(e) {
|
|
console.log('picker发送选择改变，携带值为：' + e.detail.value)
|
|
this.index = e.detail.value
|
|
},
|
|
bindMultiPickerColumnChange: function(e) {
|
|
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
|
|
this.multiIndex[e.detail.column] = e.detail.value
|
|
switch (e.detail.column) {
|
|
case 0: //拖动第1列
|
|
switch (this.multiIndex[0]) {
|
|
case 0:
|
|
this.multiArray[1] = ['中国', '日本']
|
|
this.multiArray[2] = ['北京', '上海', '广州']
|
|
break
|
|
case 1:
|
|
this.multiArray[1] = ['英国', '法国']
|
|
this.multiArray[2] = ['伦敦', '曼彻斯特']
|
|
break
|
|
}
|
|
this.multiIndex.splice(1, 1, 0)
|
|
this.multiIndex.splice(2, 1, 0)
|
|
break
|
|
case 1: //拖动第2列
|
|
switch (this.multiIndex[0]) { //判断第一列是什么
|
|
case 0:
|
|
switch (this.multiIndex[1]) {
|
|
case 0:
|
|
this.multiArray[2] = ['北京', '上海', '广州']
|
|
break
|
|
case 1:
|
|
this.multiArray[2] = ['东京','北海道']
|
|
break
|
|
}
|
|
break
|
|
case 1:
|
|
switch (this.multiIndex[1]) {
|
|
case 0:
|
|
this.multiArray[2] = ['伦敦', '曼彻斯特']
|
|
break
|
|
case 1:
|
|
this.multiArray[2] = ['巴黎', '马赛']
|
|
break
|
|
}
|
|
break
|
|
}
|
|
this.multiIndex.splice(2, 1, 0)
|
|
break
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
bindDateChange: function(e) {
|
|
this.date = e.detail.value
|
|
},
|
|
bindTimeChange: function(e) {
|
|
this.time = e.detail.value
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.uni-picker-tips {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-bottom: 15px;
|
|
padding: 0 15px;
|
|
/* text-align: right; */
|
|
}
|
|
</style>
|
|
|