other / mew-iview

Commit 7c4c9d9ce98042e5c53977ca82f231c3d054fef0

Authored by 梁灏
1 parent 420ef343

update TimePicker css 

update TimePicker css
Showing 3 changed files with 11 additions and 74 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/time-spinner.vue
  Show/Hide comments   View file @7c4c9d9
... ... @@ -175,12 +175,10 @@
175 175 },
176 176 updateScroll () {
177 177 const times = ['hours', 'minutes', 'seconds'];
178   - times.forEach(type => this.$els[type].style.overflow = 'hidden');
179 178 this.$nextTick(() => {
180 179 times.forEach(type => {
181 180 this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
182 181 });
183   - this.$nextTick(() => times.forEach(type => this.$els[type].style.overflow = 'auto'));
184 182 });
185 183 },
186 184 formatTime (text) {
... ...
src/styles/components/time-picker.less
  Show/Hide comments   View file @7c4c9d9
... ... @@ -15,11 +15,15 @@
15 15  
16 16 &-list{
17 17 width: @time-picker-cells-width-base;
18   - float: left;
19   - position: relative;
20 18 max-height: 144px;
21   - overflow-y: auto;
  19 + float: left;
  20 + overflow: hidden;
22 21 border-left: 1px solid @border-color-split;
  22 + position: relative;
  23 + &:hover{
  24 + overflow-y: auto;
  25 + }
  26 +
23 27 &:first-child{
24 28 border-left: none;
25 29 border-radius: @btn-border-radius 0 0 @btn-border-radius;
... ... @@ -38,7 +42,7 @@
38 42 line-height: 24px;
39 43 margin: 0;
40 44 padding: 0 0 0 16px;
41   - box-sizing: border-box;
  45 + box-sizing: content-box;
42 46 text-align: left;
43 47 user-select: none;
44 48 cursor: pointer;
... ...
test/routers/date.vue
  Show/Hide comments   View file @7c4c9d9
1 1 <template>
2 2 <row>
3 3 <i-col span="12">
4   - <Date-picker type="datetime" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>
  4 + <Time-picker :value="val" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
5 5 </i-col>
6 6 <i-col span="12">
7   - <Date-picker type="datetimerange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
  7 + <Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>
8 8 </i-col>
9 9 </row>
10 10 </template>
... ... @@ -12,72 +12,7 @@
12 12 export default {
13 13 data () {
14 14 return {
15   - options1: {
16   - shortcuts: [
17   - {
18   - text: '今天',
19   - value () {
20   - return new Date();
21   - },
22   - onClick: (picker) => {
23   - this.$Message.info('点击了今天');
24   - }
25   - },
26   - {
27   - text: '昨天',
28   - value () {
29   - const date = new Date();
30   - date.setTime(date.getTime() - 3600 * 1000 * 24);
31   - return date;
32   - },
33   - onClick: (picker) => {
34   - this.$Message.info('点击了昨天');
35   - }
36   - },
37   - {
38   - text: '一周前',
39   - value () {
40   - const date = new Date();
41   - date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
42   - return date;
43   - },
44   - onClick: (picker) => {
45   - this.$Message.info('点击了一周前');
46   - }
47   - }
48   - ]
49   - },
50   - options2: {
51   - shortcuts: [
52   - {
53   - text: '最近一周',
54   - value () {
55   - const end = new Date();
56   - const start = new Date();
57   - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
58   - return [start, end];
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 * 30);
67   - return [start, end];
68   - }
69   - },
70   - {
71   - text: '最近三个月',
72   - value () {
73   - const end = new Date();
74   - const start = new Date();
75   - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
76   - return [start, end];
77   - }
78   - }
79   - ]
80   - }
  15 + val: new Date
81 16 }
82 17 }
83 18 }
... ...