chenhaodong / mew-iview

Commit d20fe0eeb771988274871918da58315cfe7a710c

Authored by 梁灏
1 parent 68e9b100

update DatePicker 

update DatePicker
Showing 3 changed files with 45 additions and 145 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.11-rc-4", 3 + "version": "0.9.11-rc-5",
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/picker.vue
  Show/Hide comments   View file @d20fe0e
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
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="slide-up" v-ref:drop> 22 + <Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
23 <div v-el:picker></div> 23 <div v-el:picker></div>
24 </Drop> 24 </Drop>
25 </div> 25 </div>
@@ -135,12 +135,6 @@ @@ -135,12 +135,6 @@
135 } 135 }
136 }; 136 };
137 137
138 - const PLACEMENT_MAP = {  
139 - left: 'bottom-start',  
140 - center: 'bottom-center',  
141 - right: 'bottom-end'  
142 - };  
143 -  
144 export default { 138 export default {
145 components: { iInput, Drop }, 139 components: { iInput, Drop },
146 directives: { clickoutside }, 140 directives: { clickoutside },
@@ -181,12 +175,6 @@ @@ -181,12 +175,6 @@
181 type: String, 175 type: String,
182 default: '' 176 default: ''
183 }, 177 },
184 -// align: {  
185 -// validator (value) {  
186 -// return oneOf(value, ['left', 'center', 'right']);  
187 -// },  
188 -// default: 'left'  
189 -// },  
190 placement: { 178 placement: {
191 validator (value) { 179 validator (value) {
192 return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']); 180 return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
@@ -214,9 +202,13 @@ @@ -214,9 +202,13 @@
214 iconType () { 202 iconType () {
215 return this.showClose ? 'ios-close' : 'ios-calendar-outline'; 203 return this.showClose ? 'ios-close' : 'ios-calendar-outline';
216 }, 204 },
217 -// placement () {  
218 -// return PLACEMENT_MAP[this.align];  
219 -// }, 205 + transition () {
  206 + if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
  207 + return 'slide-up';
  208 + } else {
  209 + return 'slide-down';
  210 + }
  211 + },
220 selectionMode() { 212 selectionMode() {
221 if (this.type === 'month') { 213 if (this.type === 'month') {
222 return 'month'; 214 return 'month';
@@ -339,6 +331,7 @@ @@ -339,6 +331,7 @@
339 this.visible = false; 331 this.visible = false;
340 this.internalValue = ''; 332 this.internalValue = '';
341 this.value = ''; 333 this.value = '';
  334 + this.$emit('on-clear');
342 }, 335 },
343 showPicker () { 336 showPicker () {
344 if (!this.picker) { 337 if (!this.picker) {
@@ -368,6 +361,7 @@ @@ -368,6 +361,7 @@
368 this.picker.$on('on-pick-success', () => { 361 this.picker.$on('on-pick-success', () => {
369 // this.emitChange(this.value); 362 // this.emitChange(this.value);
370 this.visible = false; 363 this.visible = false;
  364 + this.$emit('on-ok');
371 }); 365 });
372 this.picker.$on('on-pick-click', () => this.disableClickOutSide = true); 366 this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
373 367
@@ -395,13 +389,11 @@ @@ -395,13 +389,11 @@
395 if (val) { 389 if (val) {
396 this.showPicker(); 390 this.showPicker();
397 this.$refs.drop.update(); 391 this.$refs.drop.update();
398 - this.$emit('on-open-change', true); 392 + if (this.open === null) this.$emit('on-open-change', true);
399 } else { 393 } else {
400 - if (this.picker) {  
401 - this.picker.resetView && this.picker.resetView();  
402 - } 394 + if (this.picker) this.picker.resetView && this.picker.resetView();
403 this.$refs.drop.destroy(); 395 this.$refs.drop.destroy();
404 - this.$emit('on-open-change', false); 396 + if (this.open === null) this.$emit('on-open-change', false);
405 } 397 }
406 }, 398 },
407 internalValue(val) { 399 internalValue(val) {
@@ -414,6 +406,14 @@ @@ -414,6 +406,14 @@
414 handler (val) { 406 handler (val) {
415 this.internalValue = val; 407 this.internalValue = val;
416 } 408 }
  409 + },
  410 + open (val) {
  411 + if (val === true) {
  412 + this.visible = val;
  413 + this.$emit('on-open-change', true);
  414 + } else if (val === false) {
  415 + this.$emit('on-open-change', false);
  416 + }
417 } 417 }
418 }, 418 },
419 beforeDestroy () { 419 beforeDestroy () {
@@ -422,9 +422,7 @@ @@ -422,9 +422,7 @@
422 } 422 }
423 }, 423 },
424 ready () { 424 ready () {
425 - if (this.open !== null) {  
426 - this.visible = this.open;  
427 - } 425 + if (this.open !== null) this.visible = this.open;
428 } 426 }
429 } 427 }
430 </script> 428 </script>
431 \ No newline at end of file 429 \ No newline at end of file
test/routers/date.vue
  Show/Hide comments   View file @d20fe0e
1 <template> 1 <template>
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>  
14 - </div> 2 + <date-picker confirm :open="open" :value="value3" @on-change="handleChange" type="date" @on-open-change="c" @on-clear="clear" @on-ok="ok">
  3 + <a href="javascript:void(0)" @click="handleClick">
  4 + <Icon type="ios-calendar-outline"></Icon>
  5 + <template v-if="value3 === ''">选择日期</template>
  6 + <template v-else>{{ value3 }}</template>
  7 + </a>
  8 + </date-picker>
15 </template> 9 </template>
16 <script> 10 <script>
17 export default { 11 export default {
18 data () { 12 data () {
19 return { 13 return {
20 -// value: new Date(),  
21 - type: 'date',  
22 - value: '2016-12-25',  
23 - value2: ['2016-12-17', '2017-01-05'],  
24 - options2: {  
25 -// disabledDate(time) {  
26 -//// console.log(time)  
27 -//// return time.getFullYear() < 2016;  
28 -//// return time.getTime() < Date.now() - 8.64e7;  
29 -//// return time && time.valueOf() < Date.now();  
30 -// if (time.getDate() === 22 || time.getDate() === 23) {  
31 -// return true;  
32 -// } else {  
33 -// return false;  
34 -// }  
35 -// },  
36 - shortcuts: [  
37 - {  
38 - text: '最近一周',  
39 - value () {  
40 - const end = new Date();  
41 - const start = new Date();  
42 - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);  
43 - return [start, end];  
44 - },  
45 - onClick (picker) {  
46 - console.log('点击了最近一周');  
47 - }  
48 - },  
49 - {  
50 - text: '最近一个月',  
51 - value () {  
52 - const end = new Date();  
53 - const start = new Date();  
54 - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);  
55 - return [start, end];  
56 - },  
57 - onClick () {  
58 - console.log('点击了最近一个月');  
59 - }  
60 - },  
61 - {  
62 - text: '最近三个月',  
63 - value () {  
64 - const end = new Date();  
65 - const start = new Date();  
66 - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);  
67 - return [start, end];  
68 - },  
69 - onClick () {  
70 - console.log('点击了最近三个月');  
71 - }  
72 - }  
73 - ]  
74 - },  
75 - options: {  
76 - disabledDate(time) {  
77 -// console.log(time)  
78 -// return time.getFullYear() < 2016;  
79 - return time.getTime() < Date.now() - 8.64e7;  
80 -// return time && time.valueOf() < Date.now();  
81 - },  
82 - shortcuts: [  
83 - {  
84 - text: '今天',  
85 - value () {  
86 -// return new Date();  
87 - return '1/2/19'  
88 - },  
89 - onClick (picker) {  
90 - console.log('点击了今天');  
91 - }  
92 - },  
93 - {  
94 - text: '昨天',  
95 - value () {  
96 - const date = new Date();  
97 - date.setTime(date.getTime() - 3600 * 1000 * 24);  
98 - return date;  
99 - },  
100 - onClick () {  
101 - console.log('点击了昨天');  
102 - }  
103 - },  
104 - {  
105 - text: '最近三个月',  
106 - value () {  
107 - const date = new Date();  
108 - date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);  
109 - return date;  
110 - },  
111 - onClick () {  
112 - console.log('点击了一周前');  
113 - }  
114 - }  
115 - ]  
116 - },  
117 - format: 'yyyy-MM', 14 + open: false,
  15 + value3: ''
118 } 16 }
119 }, 17 },
120 - computed: {},  
121 methods: { 18 methods: {
122 - change (date) {  
123 - console.log(date) 19 + handleClick () {
  20 + this.open = !this.open;
124 }, 21 },
125 - change2 (s) {  
126 -// console.log(s) 22 + handleChange (date) {
  23 + this.value3 = date;
127 }, 24 },
128 - setDate () {  
129 -// this.value = '2016-12-24'  
130 - this.value2 = ['2016-9-1', '2016-9-20'] 25 + c (s) {
  26 + console.log(s)
  27 + },
  28 + clear (s) {
  29 + console.log(s)
  30 + },
  31 + ok (s) {
  32 + console.log(s)
131 } 33 }
132 } 34 }
133 } 35 }
134 -</script>  
135 \ No newline at end of file 36 \ No newline at end of file
  37 +</script>