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
package.json
  Show/Hide comments   View file @68e9b10
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.11-rc-3",
  3 + "version": "0.9.11-rc-4",
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/base/date-table.vue
  Show/Hide comments   View file @68e9b10
... ... @@ -224,6 +224,7 @@
224 224 this.$emit('on-pick', newDate);
225 225 }
226 226 }
  227 + this.$emit('on-pick-click');
227 228 },
228 229 handleMouseMove (event) {
229 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 67  
68 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 73  
74 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 39 selection-mode="range"
40 40 :disabled-date="disabledDate"
41 41 @on-changerange="handleChangeRange"
42   - @on-pick="handleRangePick"></date-table>
  42 + @on-pick="handleRangePick"
  43 + @on-pick-click="handlePickClick"></date-table>
43 44 <year-table
44 45 v-ref:left-year-table
45 46 v-show="leftCurrentView === 'year'"
... ... @@ -47,7 +48,8 @@
47 48 :date="leftTableDate"
48 49 selection-mode="range"
49 50 :disabled-date="disabledDate"
50   - @on-pick="handleLeftYearPick"></year-table>
  51 + @on-pick="handleLeftYearPick"
  52 + @on-pick-click="handlePickClick"></year-table>
51 53 <month-table
52 54 v-ref:left-month-table
53 55 v-show="leftCurrentView === 'month'"
... ... @@ -55,7 +57,8 @@
55 57 :date="leftTableDate"
56 58 selection-mode="range"
57 59 :disabled-date="disabledDate"
58   - @on-pick="handleLeftMonthPick"></month-table>
  60 + @on-pick="handleLeftMonthPick"
  61 + @on-pick-click="handlePickClick"></month-table>
59 62 </div>
60 63 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
61 64 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
... ... @@ -89,7 +92,8 @@
89 92 selection-mode="range"
90 93 :disabled-date="disabledDate"
91 94 @on-changerange="handleChangeRange"
92   - @on-pick="handleRangePick"></date-table>
  95 + @on-pick="handleRangePick"
  96 + @on-pick-click="handlePickClick"></date-table>
93 97 <year-table
94 98 v-ref:right-year-table
95 99 v-show="rightCurrentView === 'year'"
... ... @@ -97,7 +101,8 @@
97 101 :date="rightTableDate"
98 102 selection-mode="range"
99 103 :disabled-date="disabledDate"
100   - @on-pick="handleRightYearPick"></year-table>
  104 + @on-pick="handleRightYearPick"
  105 + @on-pick-click="handlePickClick"></year-table>
101 106 <month-table
102 107 v-ref:right-month-table
103 108 v-show="rightCurrentView === 'month'"
... ... @@ -105,7 +110,8 @@
105 110 :date="rightTableDate"
106 111 selection-mode="range"
107 112 :disabled-date="disabledDate"
108   - @on-pick="handleRightMonthPick"></month-table>
  113 + @on-pick="handleRightMonthPick"
  114 + @on-pick-click="handlePickClick"></month-table>
109 115 </div>
110 116 <Confirm
111 117 v-if="confirm"
... ...
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @68e9b10
... ... @@ -39,7 +39,8 @@
39 39 :value="value"
40 40 :selection-mode="selectionMode"
41 41 :disabled-date="disabledDate"
42   - @on-pick="handleDatePick"></date-table>
  42 + @on-pick="handleDatePick"
  43 + @on-pick-click="handlePickClick"></date-table>
43 44 <year-table
44 45 v-ref:year-table
45 46 v-show="currentView === 'year'"
... ... @@ -47,7 +48,8 @@
47 48 :date="date"
48 49 :selection-mode="selectionMode"
49 50 :disabled-date="disabledDate"
50   - @on-pick="handleYearPick"></year-table>
  51 + @on-pick="handleYearPick"
  52 + @on-pick-click="handlePickClick"></year-table>
51 53 <month-table
52 54 v-ref:month-table
53 55 v-show="currentView === 'month'"
... ... @@ -55,7 +57,8 @@
55 57 :date="date"
56 58 :selection-mode="selectionMode"
57 59 :disabled-date="disabledDate"
58   - @on-pick="handleMonthPick"></month-table>
  60 + @on-pick="handleMonthPick"
  61 + @on-pick-click="handlePickClick"></month-table>
59 62 </div>
60 63 <Confirm
61 64 v-if="confirm"
... ...
src/components/date-picker/panel/mixin.js
  Show/Hide comments   View file @68e9b10
... ... @@ -19,6 +19,9 @@ export default {
19 19 },
20 20 handlePickSuccess () {
21 21 this.$emit('on-pick-success');
  22 + },
  23 + handlePickClick () {
  24 + this.$emit('on-pick-click');
22 25 }
23 26 }
24 27 }
25 28 \ No newline at end of file
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @68e9b10
... ... @@ -181,11 +181,17 @@
181 181 type: String,
182 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 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 196 options: {
191 197 type: Object
... ... @@ -197,7 +203,8 @@
197 203 showClose: false,
198 204 visible: false,
199 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 210 computed: {
... ... @@ -207,9 +214,9 @@
207 214 iconType () {
208 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 220 selectionMode() {
214 221 if (this.type === 'month') {
215 222 return 'month';
... ... @@ -251,7 +258,8 @@
251 258 },
252 259 methods: {
253 260 handleClose () {
254   - this.visible = false;
  261 + if (!this.disableClickOutSide) this.visible = false;
  262 + this.disableClickOutSide = false;
255 263 },
256 264 handleFocus () {
257 265 if (this.readonly) return;
... ... @@ -361,6 +369,7 @@
361 369 // this.emitChange(this.value);
362 370 this.visible = false;
363 371 });
  372 + this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
364 373  
365 374 // todo $on('on-time-range')
366 375 }
... ...
test/routers/date.vue
  Show/Hide comments   View file @68e9b10
1 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 14 </div>
35 15 </template>
36 16 <script>
... ...
test/routers/dropdown.vue
  Show/Hide comments   View file @68e9b10
1 1 <template>
2   - <Dropdown @on-visible-change="v">
  2 + <Dropdown trigger="click">
3 3 <a href="javascript:void(0)">
4   - 下拉菜单
  4 + 北京小吃
5 5 <Icon type="arrow-down-b"></Icon>
6 6 </a>
7 7 <Dropdown-menu slot="list">
8 8 <Dropdown-item>驴打滚</Dropdown-item>
9 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 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 22 </Dropdown-menu>
27 23 </Dropdown>
28 24 </template>
... ...