blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix: datetimepicker cancel event not work

Browse Source
This commit is contained in:
陈嘉涵 2017-07-31 15:14:55 +08:00
parent b503369889
commit 6af82a02c6
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/examples-docs/datetime-picker.md
View File

@ -5,20 +5,21 @@ export default {
minHour: 10, minHour: 10,
maxHour: 20, maxHour: 20,
minDate: new Date(), minDate: new Date(),
currentDate: null currentDate1: null,
currentDate2: null,
currentDate3: null
}; };
}, },
methods: { methods: {
handlePickerChange(picker, values) { handlePickerChange(picker, values) {
// picker.setColumnValues(1, citys[values[0]]);
console.log(values); console.log(values);
}, },
handlePickerCancel() { handlePickerCancel() {
alert('picker cancel'); console.log('picker cancel');
}, },
handlePickerConfirm() { handlePickerConfirm() {
alert('picker confirm'); console.log('picker confirm');
} }
} }
}; };
@ -63,7 +64,7 @@ export default {
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentDate1"
type="datetime" type="datetime"
format="yyyy.mm.dd hh时 mm分" format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour" :min-hour="minHour"
@ -98,7 +99,7 @@ export default {
:::demo 选择日期 :::demo 选择日期
```html ```html
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentDate2"
type="date" type="date"
format="yyyy.mm.dd hh时 mm分" format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour" :min-hour="minHour"
@ -114,13 +115,13 @@ export default {
:::demo 选择时间 :::demo 选择时间
```html ```html
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentDate3"
type="time" type="time"
format="yyyy.mm.dd hh时 mm分" format="yyyy.mm.dd hh时 mm分"
:min-hour="minHour" :min-hour="minHour"
:max-hour="maxHour" :max-hour="maxHour"
:min-date="minDate" :min-date="minDate"
@change="handlePickerChange"> @change="handlePickerChange">
</van-datetime-picker> </van-datetime-picker>
``` ```
::: :::
@ -145,6 +146,14 @@ export default {
| defaultIndex | 初始选中值的索引，默认为0 | | defaultIndex | 初始选中值的索引，默认为0 |
| className | 为对应列添加特殊的`class` | | className | 为对应列添加特殊的`class` |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当值变化时触发的事件 | picker 实例 |
| confirm | 点击完成按钮时触发的事件 | 当前 value |
| cancel | 点击取消按钮时触发的事件 | - |
### change事件 ### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： 在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：

7
packages/datetime-picker/src/datetime-picker.vue
View File

@ -5,6 +5,7 @@
:visible-item-count="visibleItemCount" :visible-item-count="visibleItemCount"
@change="handlePickerChange" @change="handlePickerChange"
@confirm="handlePickerConfirm" @confirm="handlePickerConfirm"
@cancel="$emit('cancel')"
showToolbar> showToolbar>
</van-picker> </van-picker>
</template> </template>
@ -85,7 +86,6 @@ export default {
if (!isEqual) this.innerValue = val; if (!isEqual) this.innerValue = val;
}, },
innerValue(val) { innerValue(val) {
console.log(val + '!!!');
this.updateColumnValue(val); this.updateColumnValue(val);
this.$emit('input', val); this.$emit('input', val);
} }
@ -217,12 +217,11 @@ export default {
isShortMonth(month) { isShortMonth(month) {
return [4, 6, 9, 11].indexOf(month) > -1; return [4, 6, 9, 11].indexOf(month) > -1;
}, },
handlePickerConfirm(values) { handlePickerConfirm() {
this.$emit('confirm', this.innerValue); this.$emit('confirm', this.innerValue);
}, },
handlePickerChange(picker) { handlePickerChange(picker) {
const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue); const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
console.log(values);
let value; let value;
if (this.type === 'time') { if (this.type === 'time') {
@ -243,7 +242,7 @@ export default {
} }
value = this.correctValue(value); value = this.correctValue(value);
this.innerValue = value; this.innerValue = value;
console.log(value, this.innerValue); this.$emit('change', picker);
}, },
updateColumnValue(value) { updateColumnValue(value) {
let values = []; let values = [];