ant-design-vue/components/date-picker/demo/mode.md

63 lines
1.2 KiB
Markdown
Raw Normal View History

2018-03-18 14:05:55 +00:00
<cn>
#### 受控面板
2018-03-15 13:40:34 +00:00
通过组合 `mode``onPanelChange` 控制要展示的面板。
2018-03-18 14:05:55 +00:00
</cn>
2018-03-15 13:40:34 +00:00
2018-03-18 14:05:55 +00:00
<us>
#### Controlled Panels
2018-03-15 13:40:34 +00:00
Determing which panel to show with `mode` and `onPanelChange`.
2018-03-18 14:05:55 +00:00
</us>
2018-03-15 13:40:34 +00:00
2018-03-18 14:05:55 +00:00
```html
<template>
<div>
<a-date-picker
:mode="mode1"
showTime
@openChange="handleOpenChange1"
@panelChange="handlePanelChange1"
/>
<br />
<a-range-picker
:placeholder="['Start month', 'End month']"
format="YYYY-MM"
:value="value"
:mode="mode2"
@panelChange="handlePanelChange2"
2019-04-20 04:34:24 +00:00
@change="handleChange"
2018-03-18 14:05:55 +00:00
/>
</div>
</template>
<script>
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
mode1: 'time',
mode2: ['month', 'month'],
value: [],
};
2019-04-20 04:34:24 +00:00
},
2019-09-28 12:45:07 +00:00
methods: {
handleOpenChange1(open) {
if (open) {
this.mode1 = 'time';
}
},
handleChange(value) {
this.value = value;
},
handlePanelChange1(value, mode) {
this.mode1 = mode;
},
handlePanelChange2(value, mode) {
this.value = value;
this.mode2 = [
mode[0] === 'date' ? 'month' : mode[0],
mode[1] === 'date' ? 'month' : mode[1],
];
},
2018-03-18 14:05:55 +00:00
},
2019-09-28 12:45:07 +00:00
};
2018-03-18 14:05:55 +00:00
</script>
```