chenhaodong / mew-iview

Commit 531cd1654b42b89bd35efdbd15a9d2d3bf8d6036

Authored by 梁灏
1 parent 5b19b5f5

support DatePicker & TimePicker 

support DatePicker & TimePicker
Showing 19 changed files with 265 additions and 79 deletions   Show diff stats
Inline Side-by-side
1 ### Button 1 ### Button
2 可以考虑是否支持 @click，而不用 @click.native 2 可以考虑是否支持 @click，而不用 @click.native
3 ### Input 3 ### Input
4 -使用 v-model 4 +使用 v-model，增加 on-input-change // todo 考虑更名
5 ### RadioGroup 5 ### RadioGroup
6 使用 v-model 6 使用 v-model
7 ### Radio 7 ### Radio
@@ -44,4 +44,5 @@ Caspanel 的 sublist 从 prop -> data @@ -44,4 +44,5 @@ Caspanel 的 sublist 从 prop -> data
44 ### Select 44 ### Select
45 model 改为 value，支持 v-model 45 model 改为 value，支持 v-model
46 ### Page 46 ### Page
47 -class 改为 className  
48 \ No newline at end of file 47 \ No newline at end of file
  48 +class 改为 className
  49 +### DatePicker
@@ -27,10 +27,10 @@ @@ -27,10 +27,10 @@
27 - [ ] Table 27 - [ ] Table
28 - [x] Select 28 - [x] Select
29 - [x] Slider 29 - [x] Slider
30 -- [ ] DatePicker  
31 -- [ ] TimePicker 30 +- [x] DatePicker
  31 +- [x] TimePicker
32 - [x] Cascader 32 - [x] Cascader
33 -- [ ] Transfer 33 +- [x] Transfer
34 - [x] InputNumber 34 - [x] InputNumber
35 - [x] Rate 35 - [x] Rate
36 - [x] Upload 36 - [x] Upload
@@ -47,6 +47,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -47,6 +47,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
47 <li><router-link to="/backtop">Backtop</router-link></li> 47 <li><router-link to="/backtop">Backtop</router-link></li>
48 <li><router-link to="/page">Page</router-link></li> 48 <li><router-link to="/page">Page</router-link></li>
49 <li><router-link to="/transfer">Transfer</router-link></li> 49 <li><router-link to="/transfer">Transfer</router-link></li>
  50 + <li><router-link to="/date">Date</router-link></li>
50 </ul> 51 </ul>
51 </nav> 52 </nav>
52 <router-view></router-view> 53 <router-view></router-view>
@@ -152,6 +152,10 @@ const router = new VueRouter({ @@ -152,6 +152,10 @@ const router = new VueRouter({
152 { 152 {
153 path: '/transfer', 153 path: '/transfer',
154 component: require('./routers/transfer.vue') 154 component: require('./routers/transfer.vue')
  155 + },
  156 + {
  157 + path: '/date',
  158 + component: require('./routers/date.vue')
155 } 159 }
156 ] 160 ]
157 }); 161 });
examples/routers/date.vue
  Show/Hide comments   View file @531cd16
1 <template> 1 <template>
2 - <Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>  
3 - <br>  
4 - <Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>  
5 - <br>  
6 - <Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>  
7 - <br>  
8 - <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> 2 + <div>
  3 + {{ val1 }}
  4 + <Date-picker v-model="val1" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
  5 + <div @click="val1 = '2017-03-02'">change</div>
  6 + </div>
9 </template> 7 </template>
10 <script> 8 <script>
11 export default { 9 export default {
  10 + data () {
  11 + return {
  12 + val1: ''
  13 + }
  14 + },
  15 + computed: {
  16 + ddd () {
  17 + const date = new Date(this.val1);
  18 + const year = date.getFullYear();
  19 + const month = date.getMonth() + 1;
  20 + const day = date.getDate();
12 21
  22 + return `${year}-${month}-${day}`;
  23 +
  24 + }
  25 + }
13 } 26 }
14 </script> 27 </script>
  28 +
  29 +
  30 +<!--<template>-->
  31 + <!--<row>-->
  32 + <!--<i-col span="12">-->
  33 + <!--<Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  34 + <!--</i-col>-->
  35 + <!--<i-col span="12">-->
  36 + <!--<Date-picker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  37 + <!--</i-col>-->
  38 + <!--</row>-->
  39 +<!--</template>-->
  40 +<!--<script>-->
  41 + <!--export default {-->
  42 + <!--data () {-->
  43 + <!--return {-->
  44 + <!--options1: {-->
  45 + <!--shortcuts: [-->
  46 + <!--{-->
  47 + <!--text: '今天',-->
  48 + <!--value () {-->
  49 + <!--return new Date();-->
  50 + <!--},-->
  51 + <!--onClick: (picker) => {-->
  52 + <!--this.$Message.info('点击了今天');-->
  53 + <!--}-->
  54 + <!--},-->
  55 + <!--{-->
  56 + <!--text: '昨天',-->
  57 + <!--value () {-->
  58 + <!--const date = new Date();-->
  59 + <!--date.setTime(date.getTime() - 3600 * 1000 * 24);-->
  60 + <!--return date;-->
  61 + <!--},-->
  62 + <!--onClick: (picker) => {-->
  63 + <!--this.$Message.info('点击了昨天');-->
  64 + <!--}-->
  65 + <!--},-->
  66 + <!--{-->
  67 + <!--text: '一周前',-->
  68 + <!--value () {-->
  69 + <!--const date = new Date();-->
  70 + <!--date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);-->
  71 + <!--return date;-->
  72 + <!--},-->
  73 + <!--onClick: (picker) => {-->
  74 + <!--this.$Message.info('点击了一周前');-->
  75 + <!--}-->
  76 + <!--}-->
  77 + <!--]-->
  78 + <!--},-->
  79 + <!--options2: {-->
  80 + <!--shortcuts: [-->
  81 + <!--{-->
  82 + <!--text: '最近一周',-->
  83 + <!--value () {-->
  84 + <!--const end = new Date();-->
  85 + <!--const start = new Date();-->
  86 + <!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);-->
  87 + <!--return [start, end];-->
  88 + <!--}-->
  89 + <!--},-->
  90 + <!--{-->
  91 + <!--text: '最近一个月',-->
  92 + <!--value () {-->
  93 + <!--const end = new Date();-->
  94 + <!--const start = new Date();-->
  95 + <!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);-->
  96 + <!--return [start, end];-->
  97 + <!--}-->
  98 + <!--},-->
  99 + <!--{-->
  100 + <!--text: '最近三个月',-->
  101 + <!--value () {-->
  102 + <!--const end = new Date();-->
  103 + <!--const start = new Date();-->
  104 + <!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);-->
  105 + <!--return [start, end];-->
  106 + <!--}-->
  107 + <!--}-->
  108 + <!--]-->
  109 + <!--}-->
  110 + <!--}-->
  111 + <!--}-->
  112 + <!--}-->
  113 +<!--</script>-->
  114 +
  115 +
  116 +<!--<template>-->
  117 + <!--<row>-->
  118 + <!--<i-col span="12">-->
  119 + <!--<Date-picker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  120 + <!--</i-col>-->
  121 + <!--<i-col span="12">-->
  122 + <!--<Date-picker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  123 + <!--</i-col>-->
  124 + <!--</row>-->
  125 +<!--</template>-->
  126 +<!--<script>-->
  127 + <!--export default {-->
  128 + <!--data () {-->
  129 + <!--return {-->
  130 + <!--value1: '2016-01-01',-->
  131 + <!--value2: ['2016-01-01', '2016-02-15']-->
  132 + <!--}-->
  133 + <!--}-->
  134 + <!--}-->
  135 +<!--</script>-->
  136 +
  137 +
  138 +<!--<template>-->
  139 + <!--<div>-->
  140 + <!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
  141 + <!--<br>-->
  142 + <!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
  143 + <!--<br>-->
  144 + <!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
  145 + <!--<br>-->
  146 + <!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
  147 + <!--</div>-->
  148 +<!--</template>-->
  149 +<!--<script>-->
  150 + <!--export default {-->
  151 +
  152 + <!--}-->
  153 +<!--</script>-->
  154 +
  155 +
  156 +<!--<template>-->
  157 + <!--<row>-->
  158 + <!--<i-col span="12">-->
  159 + <!--<Time-picker type="time" placeholder="选择时间" style="width: 168px"></Time-picker>-->
  160 + <!--</i-col>-->
  161 + <!--<i-col span="12">-->
  162 + <!--<Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>-->
  163 + <!--</i-col>-->
  164 + <!--</row>-->
  165 +<!--</template>-->
  166 +<!--<script>-->
  167 + <!--export default {-->
  168 + <!--data () {-->
  169 + <!--return {-->
  170 + <!--t1: ''-->
  171 + <!--}-->
  172 + <!--}-->
  173 + <!--}-->
  174 +<!--</script>-->
  175 +
  176 +
  177 +
  178 +
src/components/date-picker/base/confirm.vue
  Show/Hide comments   View file @531cd16
@@ -4,8 +4,8 @@ @@ -4,8 +4,8 @@
4 <template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template> 4 <template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
5 <template v-else>{{ t('i.datepicker.selectTime') }}</template> 5 <template v-else>{{ t('i.datepicker.selectTime') }}</template>
6 </span> 6 </span>
7 - <i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>  
8 - <i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button> 7 + <i-button size="small" type="text" @click.native="handleClear">{{ t('i.datepicker.clear') }}</i-button>
  8 + <i-button size="small" type="primary" @click.native="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
9 </div> 9 </div>
10 </template> 10 </template>
11 <script> 11 <script>
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @531cd16
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <div :class="[prefixCls + '-header']"> 6 <div :class="[prefixCls + '-header']">
7 <span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span> 7 <span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
8 </div> 8 </div>
9 - <span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span> 9 + <span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index">{{ cell.text }}</em></span>
10 </div> 10 </div>
11 </template> 11 </template>
12 <script> 12 <script>
src/components/date-picker/base/month-table.vue
  Show/Hide comments   View file @531cd16
1 <template> 1 <template>
2 <div :class="classes" @click="handleClick"> 2 <div :class="classes" @click="handleClick">
3 - <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span> 3 + <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>
4 </div> 4 </div>
5 </template> 5 </template>
6 <script> 6 <script>
src/components/date-picker/base/time-spinner.vue
  Show/Hide comments   View file @531cd16
1 <template> 1 <template>
2 <div :class="classes"> 2 <div :class="classes">
3 - <div :class="[prefixCls+ '-list']" v-el:hours> 3 + <div :class="[prefixCls+ '-list']" ref="hours">
4 <ul :class="[prefixCls + '-ul']" @click="handleClickHours"> 4 <ul :class="[prefixCls + '-ul']" @click="handleClickHours">
5 - <li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li> 5 + <li :class="getCellCls(item)" v-for="(item, index) in hoursList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
6 </ul> 6 </ul>
7 </div> 7 </div>
8 - <div :class="[prefixCls+ '-list']" v-el:minutes> 8 + <div :class="[prefixCls+ '-list']" ref="minutes">
9 <ul :class="[prefixCls + '-ul']" @click="handleClickMinutes"> 9 <ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
10 - <li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li> 10 + <li :class="getCellCls(item)" v-for="(item, index) in minutesList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
11 </ul> 11 </ul>
12 </div> 12 </div>
13 - <div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds> 13 + <div :class="[prefixCls+ '-list']" v-show="showSeconds" ref="seconds">
14 <ul :class="[prefixCls + '-ul']" @click="handleClickSeconds"> 14 <ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
15 - <li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li> 15 + <li :class="getCellCls(item)" v-for="(item, index) in secondsList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
16 </ul> 16 </ul>
17 </div> 17 </div>
18 </div> 18 </div>
@@ -159,9 +159,9 @@ @@ -159,9 +159,9 @@
159 this.$emit('on-pick-click'); 159 this.$emit('on-pick-click');
160 }, 160 },
161 scroll (type, index) { 161 scroll (type, index) {
162 - const from = this.$els[type].scrollTop; 162 + const from = this.$refs[type].scrollTop;
163 const to = 24 * this.getScrollIndex(type, index); 163 const to = 24 * this.getScrollIndex(type, index);
164 - scrollTop(this.$els[type], from, to, 500); 164 + scrollTop(this.$refs[type], from, to, 500);
165 }, 165 },
166 getScrollIndex (type, index) { 166 getScrollIndex (type, index) {
167 const Type = firstUpperCase(type); 167 const Type = firstUpperCase(type);
@@ -177,7 +177,7 @@ @@ -177,7 +177,7 @@
177 const times = ['hours', 'minutes', 'seconds']; 177 const times = ['hours', 'minutes', 'seconds'];
178 this.$nextTick(() => { 178 this.$nextTick(() => {
179 times.forEach(type => { 179 times.forEach(type => {
180 - this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]); 180 + this.$refs[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
181 }); 181 });
182 }); 182 });
183 }, 183 },
@@ -199,7 +199,7 @@ @@ -199,7 +199,7 @@
199 this.scroll('seconds', val); 199 this.scroll('seconds', val);
200 } 200 }
201 }, 201 },
202 - compiled () { 202 + mounted () {
203 this.updateScroll(); 203 this.updateScroll();
204 this.$nextTick(() => this.compiled = true); 204 this.$nextTick(() => this.compiled = true);
205 } 205 }
src/components/date-picker/base/year-table.vue
  Show/Hide comments   View file @531cd16
1 <template> 1 <template>
2 <div :class="classes" @click="handleClick"> 2 <div :class="classes" @click="handleClick">
3 - <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span> 3 + <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span>
4 </div> 4 </div>
5 </template> 5 </template>
6 <script> 6 <script>
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @531cd16
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 @on-pick="handleRangePick" 42 @on-pick="handleRangePick"
43 @on-pick-click="handlePickClick"></date-table> 43 @on-pick-click="handlePickClick"></date-table>
44 <year-table 44 <year-table
45 - v-ref:left-year-table 45 + ref="leftYearTable"
46 v-show="leftCurrentView === 'year'" 46 v-show="leftCurrentView === 'year'"
47 :year="leftTableYear" 47 :year="leftTableYear"
48 :date="leftTableDate" 48 :date="leftTableDate"
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 @on-pick="handleLeftYearPick" 51 @on-pick="handleLeftYearPick"
52 @on-pick-click="handlePickClick"></year-table> 52 @on-pick-click="handlePickClick"></year-table>
53 <month-table 53 <month-table
54 - v-ref:left-month-table 54 + ref="leftMonthTable"
55 v-show="leftCurrentView === 'month'" 55 v-show="leftCurrentView === 'month'"
56 :month="leftMonth" 56 :month="leftMonth"
57 :date="leftTableDate" 57 :date="leftTableDate"
@@ -95,7 +95,7 @@ @@ -95,7 +95,7 @@
95 @on-pick="handleRangePick" 95 @on-pick="handleRangePick"
96 @on-pick-click="handlePickClick"></date-table> 96 @on-pick-click="handlePickClick"></date-table>
97 <year-table 97 <year-table
98 - v-ref:right-year-table 98 + ref="rightYearTable"
99 v-show="rightCurrentView === 'year'" 99 v-show="rightCurrentView === 'year'"
100 :year="rightTableYear" 100 :year="rightTableYear"
101 :date="rightTableDate" 101 :date="rightTableDate"
@@ -104,7 +104,7 @@ @@ -104,7 +104,7 @@
104 @on-pick="handleRightYearPick" 104 @on-pick="handleRightYearPick"
105 @on-pick-click="handlePickClick"></year-table> 105 @on-pick-click="handlePickClick"></year-table>
106 <month-table 106 <month-table
107 - v-ref:right-month-table 107 + ref="rightMonthTable"
108 v-show="rightCurrentView === 'month'" 108 v-show="rightCurrentView === 'month'"
109 :month="rightMonth" 109 :month="rightMonth"
110 :date="rightTableDate" 110 :date="rightTableDate"
@@ -115,7 +115,7 @@ @@ -115,7 +115,7 @@
115 </div> 115 </div>
116 <div :class="[prefixCls + '-content']" v-show="isTime"> 116 <div :class="[prefixCls + '-content']" v-show="isTime">
117 <time-picker 117 <time-picker
118 - v-ref:time-picker 118 + ref="timePicker"
119 v-show="isTime" 119 v-show="isTime"
120 @on-pick="handleTimePick" 120 @on-pick="handleTimePick"
121 @on-pick-click="handlePickClick"></time-picker> 121 @on-pick-click="handlePickClick"></time-picker>
@@ -407,7 +407,7 @@ @@ -407,7 +407,7 @@
407 this.handleConfirm(false); 407 this.handleConfirm(false);
408 } 408 }
409 }, 409 },
410 - compiled () { 410 + mounted () {
411 if (this.showTime) { 411 if (this.showTime) {
412 // todo 这里也到不了 412 // todo 这里也到不了
413 this.$refs.timePicker.date = this.minDate; 413 this.$refs.timePicker.date = this.minDate;
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @531cd16
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 @on-pick="handleDatePick" 42 @on-pick="handleDatePick"
43 @on-pick-click="handlePickClick"></date-table> 43 @on-pick-click="handlePickClick"></date-table>
44 <year-table 44 <year-table
45 - v-ref:year-table 45 + ref="yearTable"
46 v-show="currentView === 'year'" 46 v-show="currentView === 'year'"
47 :year="year" 47 :year="year"
48 :date="date" 48 :date="date"
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 @on-pick="handleYearPick" 51 @on-pick="handleYearPick"
52 @on-pick-click="handlePickClick"></year-table> 52 @on-pick-click="handlePickClick"></year-table>
53 <month-table 53 <month-table
54 - v-ref:month-table 54 + ref="monthTable"
55 v-show="currentView === 'month'" 55 v-show="currentView === 'month'"
56 :month="month" 56 :month="month"
57 :date="date" 57 :date="date"
@@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
60 @on-pick="handleMonthPick" 60 @on-pick="handleMonthPick"
61 @on-pick-click="handlePickClick"></month-table> 61 @on-pick-click="handlePickClick"></month-table>
62 <time-picker 62 <time-picker
63 - v-ref:time-picker 63 + ref="timePicker"
64 show-date 64 show-date
65 v-show="currentView === 'time'" 65 v-show="currentView === 'time'"
66 @on-pick="handleTimePick" 66 @on-pick="handleTimePick"
@@ -272,7 +272,7 @@ @@ -272,7 +272,7 @@
272 this.handleDatePick(date); 272 this.handleDatePick(date);
273 } 273 }
274 }, 274 },
275 - compiled () { 275 + mounted () {
276 if (this.selectionMode === 'month') { 276 if (this.selectionMode === 'month') {
277 this.currentView = 'month'; 277 this.currentView = 'month';
278 } 278 }
src/components/date-picker/panel/time-range.vue
  Show/Hide comments   View file @531cd16
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 <template v-else>{{ t('i.datepicker.startTime') }}</template> 7 <template v-else>{{ t('i.datepicker.startTime') }}</template>
8 </div> 8 </div>
9 <time-spinner 9 <time-spinner
10 - v-ref:time-spinner 10 + ref="timeSpinner"
11 :show-seconds="showSeconds" 11 :show-seconds="showSeconds"
12 :hours="hours" 12 :hours="hours"
13 :minutes="minutes" 13 :minutes="minutes"
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 <template v-else>{{ t('i.datepicker.endTime') }}</template> 25 <template v-else>{{ t('i.datepicker.endTime') }}</template>
26 </div> 26 </div>
27 <time-spinner 27 <time-spinner
28 - v-ref:time-spinner-end 28 + ref="timeSpinnerEnd"
29 :show-seconds="showSeconds" 29 :show-seconds="showSeconds"
30 :hours="hoursEnd" 30 :hours="hoursEnd"
31 :minutes="minutesEnd" 31 :minutes="minutesEnd"
@@ -200,7 +200,7 @@ @@ -200,7 +200,7 @@
200 this.$refs.timeSpinnerEnd.updateScroll(); 200 this.$refs.timeSpinnerEnd.updateScroll();
201 } 201 }
202 }, 202 },
203 - compiled () { 203 + mounted () {
204 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; 204 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
205 } 205 }
206 }; 206 };
src/components/date-picker/panel/time.vue
  Show/Hide comments   View file @531cd16
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div> 4 <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
5 <div :class="[prefixCls + '-content']"> 5 <div :class="[prefixCls + '-content']">
6 <time-spinner 6 <time-spinner
7 - v-ref:time-spinner 7 + ref="timeSpinner"
8 :show-seconds="showSeconds" 8 :show-seconds="showSeconds"
9 :hours="hours" 9 :hours="hours"
10 :minutes="minutes" 10 :minutes="minutes"
@@ -108,7 +108,7 @@ @@ -108,7 +108,7 @@
108 this.$refs.timeSpinner.updateScroll(); 108 this.$refs.timeSpinner.updateScroll();
109 } 109 }
110 }, 110 },
111 - compiled () { 111 + mounted () {
112 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true; 112 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
113 } 113 }
114 }; 114 };
src/components/date-picker/picker.vue
  Show/Hide comments   View file @531cd16
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div 2 <div
3 :class="[prefixCls]" 3 :class="[prefixCls]"
4 v-clickoutside="handleClose"> 4 v-clickoutside="handleClose">
5 - <div v-el:reference :class="[prefixCls + '-rel']"> 5 + <div ref="reference" :class="[prefixCls + '-rel']">
6 <slot> 6 <slot>
7 <i-input 7 <i-input
8 :class="[prefixCls + '-editor']" 8 :class="[prefixCls + '-editor']"
@@ -11,17 +11,19 @@ @@ -11,17 +11,19 @@
11 :size="size" 11 :size="size"
12 :placeholder="placeholder" 12 :placeholder="placeholder"
13 :value="visualValue" 13 :value="visualValue"
14 - @on-change="handleInputChange" 14 + @on-input-change="handleInputChange"
15 @on-focus="handleFocus" 15 @on-focus="handleFocus"
16 @on-click="handleIconClick" 16 @on-click="handleIconClick"
17 - @mouseenter="handleInputMouseenter"  
18 - @mouseleave="handleInputMouseleave" 17 + @mouseenter.native="handleInputMouseenter"
  18 + @mouseleave.native="handleInputMouseleave"
19 :icon="iconType"></i-input> 19 :icon="iconType"></i-input>
20 </slot> 20 </slot>
21 </div> 21 </div>
22 - <Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>  
23 - <div v-el:picker></div>  
24 - </Drop> 22 + <transition :name="transition">
  23 + <Drop v-show="opened" :placement="placement" ref="drop">
  24 + <div ref="picker"></div>
  25 + </Drop>
  26 + </transition>
25 </div> 27 </div>
26 </template> 28 </template>
27 <script> 29 <script>
@@ -192,7 +194,8 @@ @@ -192,7 +194,8 @@
192 visible: false, 194 visible: false,
193 picker: null, 195 picker: null,
194 internalValue: '', 196 internalValue: '',
195 - disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker 197 + disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
  198 + currentValue: this.value
196 }; 199 };
197 }, 200 },
198 computed: { 201 computed: {
@@ -358,21 +361,23 @@ @@ -358,21 +361,23 @@
358 handleClear () { 361 handleClear () {
359 this.visible = false; 362 this.visible = false;
360 this.internalValue = ''; 363 this.internalValue = '';
361 - this.value = ''; 364 + this.currentValue = '';
362 this.$emit('on-clear'); 365 this.$emit('on-clear');
363 - this.$dispatch('on-form-change', ''); 366 + // todo 事件
  367 +// this.$dispatch('on-form-change', '');
364 }, 368 },
365 showPicker () { 369 showPicker () {
366 if (!this.picker) { 370 if (!this.picker) {
  371 + let isConfirm = this.confirm;
367 const type = this.type; 372 const type = this.type;
368 373
369 - this.picker = new Vue(this.panel).$mount(this.$els.picker); 374 + this.picker = new Vue(this.panel).$mount(this.$refs.picker);
370 if (type === 'datetime' || type === 'datetimerange') { 375 if (type === 'datetime' || type === 'datetimerange') {
371 - this.confirm = true; 376 + isConfirm = true;
372 this.picker.showTime = true; 377 this.picker.showTime = true;
373 } 378 }
374 this.picker.value = this.internalValue; 379 this.picker.value = this.internalValue;
375 - this.picker.confirm = this.confirm; 380 + this.picker.confirm = isConfirm;
376 this.picker.selectionMode = this.selectionMode; 381 this.picker.selectionMode = this.selectionMode;
377 if (this.format) this.picker.format = this.format; 382 if (this.format) this.picker.format = this.format;
378 383
@@ -388,8 +393,8 @@ @@ -388,8 +393,8 @@
388 } 393 }
389 394
390 this.picker.$on('on-pick', (date, visible = false) => { 395 this.picker.$on('on-pick', (date, visible = false) => {
391 - if (!this.confirm) this.visible = visible;  
392 - this.value = date; 396 + if (!isConfirm) this.visible = visible;
  397 + this.currentValue = date;
393 this.picker.value = date; 398 this.picker.value = date;
394 this.picker.resetView && this.picker.resetView(); 399 this.picker.resetView && this.picker.resetView();
395 this.emitChange(date); 400 this.emitChange(date);
@@ -425,7 +430,8 @@ @@ -425,7 +430,8 @@
425 } 430 }
426 431
427 this.$emit('on-change', newDate); 432 this.$emit('on-change', newDate);
428 - this.$dispatch('on-form-change', newDate); 433 + // todo 事件
  434 +// this.$dispatch('on-form-change', newDate);
429 } 435 }
430 }, 436 },
431 watch: { 437 watch: {
@@ -444,8 +450,12 @@ @@ -444,8 +450,12 @@
444 if (!val && this.picker && typeof this.picker.handleClear === 'function') { 450 if (!val && this.picker && typeof this.picker.handleClear === 'function') {
445 this.picker.handleClear(); 451 this.picker.handleClear();
446 } 452 }
  453 + this.$emit('input', val);
447 }, 454 },
448 - value: { 455 + value (val) {
  456 + this.currentValue = val;
  457 + },
  458 + currentValue: {
449 immediate: true, 459 immediate: true,
450 handler (val) { 460 handler (val) {
451 const type = this.type; 461 const type = this.type;
@@ -462,6 +472,7 @@ @@ -462,6 +472,7 @@
462 } 472 }
463 473
464 this.internalValue = val; 474 this.internalValue = val;
  475 + this.$emit('input', val);
465 } 476 }
466 }, 477 },
467 open (val) { 478 open (val) {
@@ -478,16 +489,17 @@ @@ -478,16 +489,17 @@
478 this.picker.$destroy(); 489 this.picker.$destroy();
479 } 490 }
480 }, 491 },
481 - ready () { 492 + mounted () {
482 if (this.open !== null) this.visible = this.open; 493 if (this.open !== null) this.visible = this.open;
483 - },  
484 - events: {  
485 - 'on-form-blur' () {  
486 - return false;  
487 - },  
488 - 'on-form-change' () {  
489 - return false;  
490 - }  
491 } 494 }
  495 + // todo 事件
  496 +// events: {
  497 +// 'on-form-blur' () {
  498 +// return false;
  499 +// },
  500 +// 'on-form-change' () {
  501 +// return false;
  502 +// }
  503 +// }
492 }; 504 };
493 </script> 505 </script>
src/components/date-picker/picker/date-picker.js
  Show/Hide comments   View file @531cd16
@@ -23,11 +23,11 @@ export default { @@ -23,11 +23,11 @@ export default {
23 value: {} 23 value: {}
24 }, 24 },
25 created () { 25 created () {
26 - if (!this.value) { 26 + if (!this.currentValue) {
27 if (this.type === 'daterange' || this.type === 'datetimerange') { 27 if (this.type === 'daterange' || this.type === 'datetimerange') {
28 - this.value = ['','']; 28 + this.currentValue = ['',''];
29 } else { 29 } else {
30 - this.value = ''; 30 + this.currentValue = '';
31 } 31 }
32 } 32 }
33 33
src/components/date-picker/picker/time-picker.js
  Show/Hide comments   View file @531cd16
@@ -24,11 +24,11 @@ export default { @@ -24,11 +24,11 @@ export default {
24 value: {} 24 value: {}
25 }, 25 },
26 created () { 26 created () {
27 - if (!this.value) { 27 + if (!this.currentValue) {
28 if (this.type === 'timerange') { 28 if (this.type === 'timerange') {
29 - this.value = ['','']; 29 + this.currentValue = ['',''];
30 } else { 30 } else {
31 - this.value = ''; 31 + this.currentValue = '';
32 } 32 }
33 } 33 }
34 this.panel = getPanel(this.type); 34 this.panel = getPanel(this.type);
src/components/input/input.vue
  Show/Hide comments   View file @531cd16
@@ -19,7 +19,8 @@ @@ -19,7 +19,8 @@
19 @keyup.enter="handleEnter" 19 @keyup.enter="handleEnter"
20 @focus="handleFocus" 20 @focus="handleFocus"
21 @blur="handleBlur" 21 @blur="handleBlur"
22 - @input="handleInput"> 22 + @input="handleInput"
  23 + @change="handleChange">
23 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" ref="append"><slot name="append"></slot></div> 24 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" ref="append"><slot name="append"></slot></div>
24 </template> 25 </template>
25 <textarea 26 <textarea
@@ -158,6 +159,9 @@ @@ -158,6 +159,9 @@
158 this.setCurrentValue(value); 159 this.setCurrentValue(value);
159 this.$emit('on-change', event); 160 this.$emit('on-change', event);
160 }, 161 },
  162 + handleChange (event) {
  163 + this.$emit('on-input-change', event);
  164 + },
161 setCurrentValue (value) { 165 setCurrentValue (value) {
162 if (value === this.currentValue) return; 166 if (value === this.currentValue) return;
163 this.$nextTick(() => { 167 this.$nextTick(() => {
@@ -13,7 +13,7 @@ import Cascader from &#39;./components/cascader&#39;; @@ -13,7 +13,7 @@ import Cascader from &#39;./components/cascader&#39;;
13 import Checkbox from './components/checkbox'; 13 import Checkbox from './components/checkbox';
14 import Circle from './components/circle'; 14 import Circle from './components/circle';
15 import Collapse from './components/collapse'; 15 import Collapse from './components/collapse';
16 -// import DatePicker from './components/date-picker'; 16 +import DatePicker from './components/date-picker';
17 import Dropdown from './components/dropdown'; 17 import Dropdown from './components/dropdown';
18 // import Form from './components/form'; 18 // import Form from './components/form';
19 import Icon from './components/icon'; 19 import Icon from './components/icon';
@@ -37,7 +37,7 @@ import Switch from &#39;./components/switch&#39;; @@ -37,7 +37,7 @@ import Switch from &#39;./components/switch&#39;;
37 import Tabs from './components/tabs'; 37 import Tabs from './components/tabs';
38 import Tag from './components/tag'; 38 import Tag from './components/tag';
39 import Timeline from './components/timeline'; 39 import Timeline from './components/timeline';
40 -// import TimePicker from './components/time-picker'; 40 +import TimePicker from './components/time-picker';
41 import Tooltip from './components/tooltip'; 41 import Tooltip from './components/tooltip';
42 import Transfer from './components/transfer'; 42 import Transfer from './components/transfer';
43 import Tree from './components/tree'; 43 import Tree from './components/tree';
@@ -63,7 +63,7 @@ const iview = { @@ -63,7 +63,7 @@ const iview = {
63 Checkbox, 63 Checkbox,
64 CheckboxGroup: Checkbox.Group, 64 CheckboxGroup: Checkbox.Group,
65 iCircle: Circle, 65 iCircle: Circle,
66 - // DatePicker, 66 + DatePicker,
67 Dropdown, 67 Dropdown,
68 DropdownItem: Dropdown.Item, 68 DropdownItem: Dropdown.Item,
69 DropdownMenu: Dropdown.Menu, 69 DropdownMenu: Dropdown.Menu,
@@ -105,7 +105,7 @@ const iview = { @@ -105,7 +105,7 @@ const iview = {
105 Tag, 105 Tag,
106 Timeline, 106 Timeline,
107 TimelineItem: Timeline.Item, 107 TimelineItem: Timeline.Item,
108 - // TimePicker, 108 + TimePicker,
109 Tooltip, 109 Tooltip,
110 Transfer, 110 Transfer,
111 Tree, 111 Tree,