Commit 7c4c9d9ce98042e5c53977ca82f231c3d054fef0
1 parent
420ef343
update TimePicker css
update TimePicker css
Showing
3 changed files
with
11 additions
and
74 deletions
Show diff stats
src/components/date-picker/base/time-spinner.vue
| @@ -175,12 +175,10 @@ | @@ -175,12 +175,10 @@ | ||
| 175 | }, | 175 | }, |
| 176 | updateScroll () { | 176 | updateScroll () { |
| 177 | const times = ['hours', 'minutes', 'seconds']; | 177 | const times = ['hours', 'minutes', 'seconds']; |
| 178 | - times.forEach(type => this.$els[type].style.overflow = 'hidden'); | ||
| 179 | this.$nextTick(() => { | 178 | this.$nextTick(() => { |
| 180 | times.forEach(type => { | 179 | times.forEach(type => { |
| 181 | this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]); | 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 | formatTime (text) { | 184 | formatTime (text) { |
src/styles/components/time-picker.less
| @@ -15,11 +15,15 @@ | @@ -15,11 +15,15 @@ | ||
| 15 | 15 | ||
| 16 | &-list{ | 16 | &-list{ |
| 17 | width: @time-picker-cells-width-base; | 17 | width: @time-picker-cells-width-base; |
| 18 | - float: left; | ||
| 19 | - position: relative; | ||
| 20 | max-height: 144px; | 18 | max-height: 144px; |
| 21 | - overflow-y: auto; | 19 | + float: left; |
| 20 | + overflow: hidden; | ||
| 22 | border-left: 1px solid @border-color-split; | 21 | border-left: 1px solid @border-color-split; |
| 22 | + position: relative; | ||
| 23 | + &:hover{ | ||
| 24 | + overflow-y: auto; | ||
| 25 | + } | ||
| 26 | + | ||
| 23 | &:first-child{ | 27 | &:first-child{ |
| 24 | border-left: none; | 28 | border-left: none; |
| 25 | border-radius: @btn-border-radius 0 0 @btn-border-radius; | 29 | border-radius: @btn-border-radius 0 0 @btn-border-radius; |
| @@ -38,7 +42,7 @@ | @@ -38,7 +42,7 @@ | ||
| 38 | line-height: 24px; | 42 | line-height: 24px; |
| 39 | margin: 0; | 43 | margin: 0; |
| 40 | padding: 0 0 0 16px; | 44 | padding: 0 0 0 16px; |
| 41 | - box-sizing: border-box; | 45 | + box-sizing: content-box; |
| 42 | text-align: left; | 46 | text-align: left; |
| 43 | user-select: none; | 47 | user-select: none; |
| 44 | cursor: pointer; | 48 | cursor: pointer; |
test/routers/date.vue
| 1 | <template> | 1 | <template> |
| 2 | <row> | 2 | <row> |
| 3 | <i-col span="12"> | 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 | </i-col> | 5 | </i-col> |
| 6 | <i-col span="12"> | 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 | </i-col> | 8 | </i-col> |
| 9 | </row> | 9 | </row> |
| 10 | </template> | 10 | </template> |
| @@ -12,72 +12,7 @@ | @@ -12,72 +12,7 @@ | ||
| 12 | export default { | 12 | export default { |
| 13 | data () { | 13 | data () { |
| 14 | return { | 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 | } |