other / mew-iview

Commit 68e9b1003beb19b3c9f6c2f34af6d343c8aaace0

Authored by 梁灏
1 parent 98ca354f

update DatePicker 

update DatePicker
Showing 10 changed files with 67 additions and 67 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.11-rc-3", 3 + "version": "0.9.11-rc-4",
4 "title": "iView", 4 "title": "iView",
5 "description": "A high quality UI components Library with Vue.js", 5 "description": "A high quality UI components Library with Vue.js",
6 "homepage": "http://www.iviewui.com", 6 "homepage": "http://www.iviewui.com",
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @68e9b10
@@ -224,6 +224,7 @@ @@ -224,6 +224,7 @@
224 this.$emit('on-pick', newDate); 224 this.$emit('on-pick', newDate);
225 } 225 }
226 } 226 }
  227 + this.$emit('on-pick-click');
227 }, 228 },
228 handleMouseMove (event) { 229 handleMouseMove (event) {
229 if (!this.rangeState.selecting) return; 230 if (!this.rangeState.selecting) return;
src/components/date-picker/base/month-table.vue
  Show/Hide comments   View file @68e9b10
@@ -67,6 +67,7 @@ @@ -67,6 +67,7 @@
67 67
68 this.$emit('on-pick', index); 68 this.$emit('on-pick', index);
69 } 69 }
  70 + this.$emit('on-pick-click');
70 } 71 }
71 } 72 }
72 } 73 }
src/components/date-picker/base/year-table.vue
  Show/Hide comments   View file @68e9b10
@@ -73,6 +73,7 @@ @@ -73,6 +73,7 @@
73 73
74 this.$emit('on-pick', cell.text); 74 this.$emit('on-pick', cell.text);
75 } 75 }
  76 + this.$emit('on-pick-click');
76 } 77 }
77 } 78 }
78 } 79 }
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @68e9b10
@@ -39,7 +39,8 @@ @@ -39,7 +39,8 @@
39 selection-mode="range" 39 selection-mode="range"
40 :disabled-date="disabledDate" 40 :disabled-date="disabledDate"
41 @on-changerange="handleChangeRange" 41 @on-changerange="handleChangeRange"
42 - @on-pick="handleRangePick"></date-table> 42 + @on-pick="handleRangePick"
  43 + @on-pick-click="handlePickClick"></date-table>
43 <year-table 44 <year-table
44 v-ref:left-year-table 45 v-ref:left-year-table
45 v-show="leftCurrentView === 'year'" 46 v-show="leftCurrentView === 'year'"
@@ -47,7 +48,8 @@ @@ -47,7 +48,8 @@
47 :date="leftTableDate" 48 :date="leftTableDate"
48 selection-mode="range" 49 selection-mode="range"
49 :disabled-date="disabledDate" 50 :disabled-date="disabledDate"
50 - @on-pick="handleLeftYearPick"></year-table> 51 + @on-pick="handleLeftYearPick"
  52 + @on-pick-click="handlePickClick"></year-table>
51 <month-table 53 <month-table
52 v-ref:left-month-table 54 v-ref:left-month-table
53 v-show="leftCurrentView === 'month'" 55 v-show="leftCurrentView === 'month'"
@@ -55,7 +57,8 @@ @@ -55,7 +57,8 @@
55 :date="leftTableDate" 57 :date="leftTableDate"
56 selection-mode="range" 58 selection-mode="range"
57 :disabled-date="disabledDate" 59 :disabled-date="disabledDate"
58 - @on-pick="handleLeftMonthPick"></month-table> 60 + @on-pick="handleLeftMonthPick"
  61 + @on-pick-click="handlePickClick"></month-table>
59 </div> 62 </div>
60 <div :class="[prefixCls + '-content', prefixCls + '-content-right']"> 63 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
61 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'"> 64 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
@@ -89,7 +92,8 @@ @@ -89,7 +92,8 @@
89 selection-mode="range" 92 selection-mode="range"
90 :disabled-date="disabledDate" 93 :disabled-date="disabledDate"
91 @on-changerange="handleChangeRange" 94 @on-changerange="handleChangeRange"
92 - @on-pick="handleRangePick"></date-table> 95 + @on-pick="handleRangePick"
  96 + @on-pick-click="handlePickClick"></date-table>
93 <year-table 97 <year-table
94 v-ref:right-year-table 98 v-ref:right-year-table
95 v-show="rightCurrentView === 'year'" 99 v-show="rightCurrentView === 'year'"
@@ -97,7 +101,8 @@ @@ -97,7 +101,8 @@
97 :date="rightTableDate" 101 :date="rightTableDate"
98 selection-mode="range" 102 selection-mode="range"
99 :disabled-date="disabledDate" 103 :disabled-date="disabledDate"
100 - @on-pick="handleRightYearPick"></year-table> 104 + @on-pick="handleRightYearPick"
  105 + @on-pick-click="handlePickClick"></year-table>
101 <month-table 106 <month-table
102 v-ref:right-month-table 107 v-ref:right-month-table
103 v-show="rightCurrentView === 'month'" 108 v-show="rightCurrentView === 'month'"
@@ -105,7 +110,8 @@ @@ -105,7 +110,8 @@
105 :date="rightTableDate" 110 :date="rightTableDate"
106 selection-mode="range" 111 selection-mode="range"
107 :disabled-date="disabledDate" 112 :disabled-date="disabledDate"
108 - @on-pick="handleRightMonthPick"></month-table> 113 + @on-pick="handleRightMonthPick"
  114 + @on-pick-click="handlePickClick"></month-table>
109 </div> 115 </div>
110 <Confirm 116 <Confirm
111 v-if="confirm" 117 v-if="confirm"
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @68e9b10
@@ -39,7 +39,8 @@ @@ -39,7 +39,8 @@
39 :value="value" 39 :value="value"
40 :selection-mode="selectionMode" 40 :selection-mode="selectionMode"
41 :disabled-date="disabledDate" 41 :disabled-date="disabledDate"
42 - @on-pick="handleDatePick"></date-table> 42 + @on-pick="handleDatePick"
  43 + @on-pick-click="handlePickClick"></date-table>
43 <year-table 44 <year-table
44 v-ref:year-table 45 v-ref:year-table
45 v-show="currentView === 'year'" 46 v-show="currentView === 'year'"
@@ -47,7 +48,8 @@ @@ -47,7 +48,8 @@
47 :date="date" 48 :date="date"
48 :selection-mode="selectionMode" 49 :selection-mode="selectionMode"
49 :disabled-date="disabledDate" 50 :disabled-date="disabledDate"
50 - @on-pick="handleYearPick"></year-table> 51 + @on-pick="handleYearPick"
  52 + @on-pick-click="handlePickClick"></year-table>
51 <month-table 53 <month-table
52 v-ref:month-table 54 v-ref:month-table
53 v-show="currentView === 'month'" 55 v-show="currentView === 'month'"
@@ -55,7 +57,8 @@ @@ -55,7 +57,8 @@
55 :date="date" 57 :date="date"
56 :selection-mode="selectionMode" 58 :selection-mode="selectionMode"
57 :disabled-date="disabledDate" 59 :disabled-date="disabledDate"
58 - @on-pick="handleMonthPick"></month-table> 60 + @on-pick="handleMonthPick"
  61 + @on-pick-click="handlePickClick"></month-table>
59 </div> 62 </div>
60 <Confirm 63 <Confirm
61 v-if="confirm" 64 v-if="confirm"
src/components/date-picker/panel/mixin.js
  Show/Hide comments   View file @68e9b10
@@ -19,6 +19,9 @@ export default { @@ -19,6 +19,9 @@ export default {
19 }, 19 },
20 handlePickSuccess () { 20 handlePickSuccess () {
21 this.$emit('on-pick-success'); 21 this.$emit('on-pick-success');
  22 + },
  23 + handlePickClick () {
  24 + this.$emit('on-pick-click');
22 } 25 }
23 } 26 }
24 } 27 }
25 \ No newline at end of file 28 \ No newline at end of file
src/components/date-picker/picker.vue
  Show/Hide comments   View file @68e9b10
@@ -181,11 +181,17 @@ @@ -181,11 +181,17 @@
181 type: String, 181 type: String,
182 default: '' 182 default: ''
183 }, 183 },
184 - align: { 184 +// align: {
  185 +// validator (value) {
  186 +// return oneOf(value, ['left', 'center', 'right']);
  187 +// },
  188 +// default: 'left'
  189 +// },
  190 + placement: {
185 validator (value) { 191 validator (value) {
186 - return oneOf(value, ['left', 'center', 'right']); 192 + return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
187 }, 193 },
188 - default: 'left' 194 + default: 'bottom-start'
189 }, 195 },
190 options: { 196 options: {
191 type: Object 197 type: Object
@@ -197,7 +203,8 @@ @@ -197,7 +203,8 @@
197 showClose: false, 203 showClose: false,
198 visible: false, 204 visible: false,
199 picker: null, 205 picker: null,
200 - internalValue: '' 206 + internalValue: '',
  207 + disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
201 } 208 }
202 }, 209 },
203 computed: { 210 computed: {
@@ -207,9 +214,9 @@ @@ -207,9 +214,9 @@
207 iconType () { 214 iconType () {
208 return this.showClose ? 'ios-close' : 'ios-calendar-outline'; 215 return this.showClose ? 'ios-close' : 'ios-calendar-outline';
209 }, 216 },
210 - placement () {  
211 - return PLACEMENT_MAP[this.align];  
212 - }, 217 +// placement () {
  218 +// return PLACEMENT_MAP[this.align];
  219 +// },
213 selectionMode() { 220 selectionMode() {
214 if (this.type === 'month') { 221 if (this.type === 'month') {
215 return 'month'; 222 return 'month';
@@ -251,7 +258,8 @@ @@ -251,7 +258,8 @@
251 }, 258 },
252 methods: { 259 methods: {
253 handleClose () { 260 handleClose () {
254 - this.visible = false; 261 + if (!this.disableClickOutSide) this.visible = false;
  262 + this.disableClickOutSide = false;
255 }, 263 },
256 handleFocus () { 264 handleFocus () {
257 if (this.readonly) return; 265 if (this.readonly) return;
@@ -361,6 +369,7 @@ @@ -361,6 +369,7 @@
361 // this.emitChange(this.value); 369 // this.emitChange(this.value);
362 this.visible = false; 370 this.visible = false;
363 }); 371 });
  372 + this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
364 373
365 // todo $on('on-time-range') 374 // todo $on('on-time-range')
366 } 375 }
test/routers/date.vue
  Show/Hide comments   View file @68e9b10
1 <template> 1 <template>
2 - <div style="margin: 50px">  
3 - <i-button @click="type = 'year'">year</i-button>  
4 - <i-button @click="type = 'month'">month</i-button>  
5 - <br>  
6 - <row>  
7 - <i-col span="8">  
8 - <!--<i-button @click="setDate">set date</i-button>-->  
9 - <date-picker  
10 - type="month"  
11 - style="width:200px"  
12 - placeholder="请选择日期"  
13 - :value.sync="value"  
14 - @on-change="change"  
15 - :confirm="false"  
16 - :options="options"  
17 - open  
18 - @on-open-change="change2">  
19 - </date-picker>  
20 - </i-col>  
21 - <i-col span="8">  
22 - <date-picker  
23 - type="daterange"  
24 - style="width:300px"  
25 - placeholder="请选择日期"  
26 - :value.sync="value2"  
27 - align="right"  
28 - :editable="true"  
29 - @on-change="change"  
30 - :confirm="true"  
31 - :options="options2"></date-picker>  
32 - </i-col>  
33 - </row> 2 + <div style="margin: 50px;position: relative">
  3 + <Card>
  4 + <row>
  5 + <i-col span="12">
  6 + <date-picker type="date" placeholder="选择日期" style="width: 200px;"></date-picker>
  7 + </i-col>
  8 + <i-col span="12">
  9 + <date-picker type="daterange" placeholder="选择日期" style="width: 200px;"></date-picker>
  10 + </i-col>
  11 + </row>
  12 + fdsfs
  13 + </Card>
34 </div> 14 </div>
35 </template> 15 </template>
36 <script> 16 <script>
test/routers/dropdown.vue
  Show/Hide comments   View file @68e9b10
1 <template> 1 <template>
2 - <Dropdown @on-visible-change="v"> 2 + <Dropdown trigger="click">
3 <a href="javascript:void(0)"> 3 <a href="javascript:void(0)">
4 - 下拉菜单 4 + 北京小吃
5 <Icon type="arrow-down-b"></Icon> 5 <Icon type="arrow-down-b"></Icon>
6 </a> 6 </a>
7 <Dropdown-menu slot="list"> 7 <Dropdown-menu slot="list">
8 <Dropdown-item>驴打滚</Dropdown-item> 8 <Dropdown-item>驴打滚</Dropdown-item>
9 <Dropdown-item>炸酱面</Dropdown-item> 9 <Dropdown-item>炸酱面</Dropdown-item>
10 - <Dropdown-item disabled>豆汁儿</Dropdown-item> 10 + <Dropdown-item>豆汁儿</Dropdown-item>
  11 + <Dropdown placement="right-start">
  12 + <Dropdown-item>
  13 + 北京烤鸭
  14 + <Icon type="ios-arrow-right"></Icon>
  15 + </Dropdown-item>
  16 + <Dropdown-menu slot="list">
  17 + <Dropdown-item>挂炉烤鸭</Dropdown-item>
  18 + <Dropdown-item>焖炉烤鸭</Dropdown-item>
  19 + </Dropdown-menu>
  20 + </Dropdown>
11 <Dropdown-item>冰糖葫芦</Dropdown-item> 21 <Dropdown-item>冰糖葫芦</Dropdown-item>
12 - <Dropdown-item divided>北京烤鸭</Dropdown-item>  
13 - </Dropdown-menu>  
14 - </Dropdown>  
15 - <Dropdown style="margin-left: 20px">  
16 - <i-button type="primary">  
17 - 下拉菜单  
18 - <Icon type="arrow-down-b"></Icon>  
19 - </i-button>  
20 - <Dropdown-menu slot="list">  
21 - <Dropdown-item>驴打滚</Dropdown-item>  
22 - <Dropdown-item>炸酱面</Dropdown-item>  
23 - <Dropdown-item disabled>豆汁儿</Dropdown-item>  
24 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
25 - <Dropdown-item divided>北京烤鸭</Dropdown-item>  
26 </Dropdown-menu> 22 </Dropdown-menu>
27 </Dropdown> 23 </Dropdown>
28 </template> 24 </template>