other / 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
package.json
  Show/Hide comments   View file @d20fe0e
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.11-rc-4",
  3 + "version": "0.9.11-rc-5",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @d20fe0e
... ... @@ -19,7 +19,7 @@
19 19 :icon="iconType"></i-input>
20 20 </slot>
21 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 23 <div v-el:picker></div>
24 24 </Drop>
25 25 </div>
... ... @@ -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 138 export default {
145 139 components: { iInput, Drop },
146 140 directives: { clickoutside },
... ... @@ -181,12 +175,6 @@
181 175 type: String,
182 176 default: ''
183 177 },
184   -// align: {
185   -// validator (value) {
186   -// return oneOf(value, ['left', 'center', 'right']);
187   -// },
188   -// default: 'left'
189   -// },
190 178 placement: {
191 179 validator (value) {
192 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 202 iconType () {
215 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 212 selectionMode() {
221 213 if (this.type === 'month') {
222 214 return 'month';
... ... @@ -339,6 +331,7 @@
339 331 this.visible = false;
340 332 this.internalValue = '';
341 333 this.value = '';
  334 + this.$emit('on-clear');
342 335 },
343 336 showPicker () {
344 337 if (!this.picker) {
... ... @@ -368,6 +361,7 @@
368 361 this.picker.$on('on-pick-success', () => {
369 362 // this.emitChange(this.value);
370 363 this.visible = false;
  364 + this.$emit('on-ok');
371 365 });
372 366 this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
373 367  
... ... @@ -395,13 +389,11 @@
395 389 if (val) {
396 390 this.showPicker();
397 391 this.$refs.drop.update();
398   - this.$emit('on-open-change', true);
  392 + if (this.open === null) this.$emit('on-open-change', true);
399 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 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 399 internalValue(val) {
... ... @@ -414,6 +406,14 @@
414 406 handler (val) {
415 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 419 beforeDestroy () {
... ... @@ -422,9 +422,7 @@
422 422 }
423 423 },
424 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 428 </script>
431 429 \ No newline at end of file
... ...
test/routers/date.vue
  Show/Hide comments   View file @d20fe0e
1 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 9 </template>
16 10 <script>
17 11 export default {
18 12 data () {
19 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 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 36 \ No newline at end of file
  37 +</script>
... ...