fix: 修复datetime-pick初始值不生效问题

This commit is contained in:
niunai 2017-08-24 00:15:49 +08:00
parent e8cc4a3bf8
commit 1e474244ca
3 changed files with 20 additions and 24 deletions

View File

@ -5,15 +5,16 @@ export default {
minHour: 10, minHour: 10,
maxHour: 20, maxHour: 20,
minDate: new Date(), minDate: new Date(),
currentDate1: null, maxDate: new Date(2019, 10, 1),
currentDate1: new Date(2018, 0, 1),
currentDate2: null, currentDate2: null,
currentDate3: null currentDate3: null
}; };
}, },
methods: { methods: {
handlePickerChange(picker, values) { handlePickerChange(picker) {
console.log(values); console.log(picker);
}, },
handlePickerCancel() { handlePickerCancel() {
console.log('picker cancel'); console.log('picker cancel');
@ -36,10 +37,10 @@ export default {
<van-datetime-picker <van-datetime-picker
v-model="currentDate1" v-model="currentDate1"
type="datetime" type="datetime"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour" :min-hour="minHour"
:max-hour="maxHour" :max-hour="maxHour"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate"
@change="handlePickerChange"> @change="handlePickerChange">
</van-datetime-picker> </van-datetime-picker>
@ -50,13 +51,14 @@ export default {
minHour: 10, minHour: 10,
maxHour: 20, maxHour: 20,
minDate: new Date(), minDate: new Date(),
currentDate: null maxDate: new Date(2019, 10, 1),
currentDate: new Date(2018, 0, 1)
}; };
}, },
methods: { methods: {
handlePickerChange(picker, values) { handlePickerChange(picker) {
picker.setColumnValues(1, citys[values[0]]); console.log(picker);
} }
} }
}; };
@ -71,7 +73,6 @@ export default {
<van-datetime-picker <van-datetime-picker
v-model="currentDate2" v-model="currentDate2"
type="date" type="date"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour" :min-hour="minHour"
:max-hour="maxHour" :max-hour="maxHour"
:min-date="minDate" :min-date="minDate"
@ -87,7 +88,6 @@ export default {
<van-datetime-picker <van-datetime-picker
v-model="currentDate3" v-model="currentDate3"
type="time" type="time"
format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour" :min-hour="minHour"
:max-hour="maxHour" :max-hour="maxHour"
:min-date="minDate" :min-date="minDate"
@ -102,19 +102,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | | | visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
| itemHeight | 选中元素区高度 | Number | 44 | | | type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
| columns | 对象数组,配置每一列显示的数据 | Array | | | | minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | | | maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
| minHour | 可选的最小小时 | Number | 0 | |
### columns | maxHour | 可选的最大小时 | Number | 23 | |
`API`中的`columns`为一个对象数组,数组中的每一个对象配置每一列,每一列有以下`key`
| key | 说明 |
|-----------|-----------|
| values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引默认为0 |
| className | 为对应列添加特殊的`class` |
### Event ### Event

View File

@ -1,3 +1,3 @@
import DateTimePicker from './src/datetime-picker'; import DatetimePicker from './src/datetime-picker';
export default DateTimePicker; export default DatetimePicker;

View File

@ -285,6 +285,10 @@ export default {
} }
[].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange()); [].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
} }
},
mounted() {
this.updateColumnValue(this.innerValue);
} }
}; };
</script> </script>