date.vue
3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
<div :class="[prefixCls + '-body-wrapper']">
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts">
<div
:class="[prefixCls + '-shortcut']"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
</div>
<div :class="[prefixCls + '-body']">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear"></span>
<span
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="currentView === 'date'"></span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker">{{ }}</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker"
v-show="currentView === 'date'">{{ }}</span>
<span
:class="iconBtnCls('next')"
@click="nextMonth"
v-show="currentView === 'date'"></span>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear"></span>
</div>
<div :class="[prefixCls + '-content']">
<date-table
v-show="currentView === 'date'"></date-table>
<year-table
v-show="currentView === 'year'"></year-table>
<month-table
v-show="currentView === 'month'"></month-table>
</div>
</div>
</div>
</template>
<script>
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
components: { DateTable, YearTable, MonthTable },
data () {
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
currentView: 'date'
}
},
computed: {},
methods: {
handleShortcutClick (shortcut) {
},
iconBtnCls (direction, type = '') {
return [
`${prefixCls}-icon-btn`,
`${datePrefixCls}-${direction}-btn`,
`${datePrefixCls}-${direction}-btn-arrow${type}`,
]
},
prevYear () {
},
nextYear () {
},
prevMonth () {
},
nextMonth () {
},
showYearPicker () {
},
showMonthPicker () {
}
},
ready () {
console.log(123)
},
beforeDestroy () {
console.log(456)
}
}
</script>