github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

TimePicker: fix HH:mm style

pull/1660/head
qingwei.li 2016-12-09 18:12:56 +08:00 committed by 杨奕
parent c1a469c899
commit d835c7b4ec
4 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/zh-CN/time-picker.md
View File

@ -137,7 +137,7 @@
export default { export default {
data() { data() {
return { return {
value1: '14:30', value1: '',
value2: new Date(2016, 9, 10, 18, 40), value2: new Date(2016, 9, 10, 18, 40),
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
startTime: '', startTime: '',

8
packages/date-picker/src/panel/time-range.vue
View File

@ -10,7 +10,9 @@
<div class="el-time-range-picker__content"> <div class="el-time-range-picker__content">
<div class="el-time-range-picker__cell"> <div class="el-time-range-picker__cell">
<div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div> <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
<div class="el-time-range-picker__body el-time-panel__content"> <div
:class="{ 'has-seconds': showSeconds }"
class="el-time-range-picker__body el-time-panel__content">
<time-spinner <time-spinner
ref="minSpinner" ref="minSpinner"
:show-seconds="showSeconds" :show-seconds="showSeconds"
@ -24,7 +26,9 @@
</div> </div>
<div class="el-time-range-picker__cell"> <div class="el-time-range-picker__cell">
<div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div> <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
<div class="el-time-range-picker__body el-time-panel__content"> <div
:class="{ 'has-seconds': showSeconds }"
class="el-time-range-picker__body el-time-panel__content">
<time-spinner <time-spinner
ref="maxSpinner" ref="maxSpinner"
:show-seconds="showSeconds" :show-seconds="showSeconds"

3
packages/date-picker/src/panel/time.vue
View File

@ -3,9 +3,8 @@
<div <div
v-show="currentVisible" v-show="currentVisible"
:style="{width: width + 'px'}" :style="{width: width + 'px'}"
:class="{ 'has-seconds': showSeconds }"
class="el-time-panel"> class="el-time-panel">
<div class="el-time-panel__content"> <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
<time-spinner <time-spinner
ref="spinner" ref="spinner"
@change="handleChange" @change="handleChange"

20
packages/theme-default/src/date-picker/time-picker.css
View File

@ -13,16 +13,6 @@
z-index: var(--index-top); z-index: var(--index-top);
user-select: none; user-select: none;
&.has-seconds {
.el-time-panel__content::after {
left: calc(100% / 3 * 2);
}
.el-time-panel__content::before {
padding-left: calc(100% / 3);
}
}
@e content { @e content {
font-size: 0; font-size: 0;
position: relative; position: relative;
@ -55,6 +45,16 @@
padding-left: 50%; padding-left: 50%;
margin-right: -2px; margin-right: -2px;
} }
&.has-seconds {
&::after {
left: calc(100% / 3 * 2);
}
&::before {
padding-left: calc(100% / 3);
}
}
} }
@e footer { @e footer {