mirror of https://github.com/ElemeFE/element
TimePicker: add arrow-control
Leopoldthecoder
Black Wayne
parent
9dcc4eb0b7
commit
553e89568b
|
|
@ -49,6 +49,10 @@
|
|||
border-bottom-right-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
|
||||
&:hover {
|
||||
background-color: #dfe4ed;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
|
|
@ -77,6 +81,9 @@
|
|||
font-size: 12px;
|
||||
margin: 6px 0;
|
||||
line-height: 2.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -126,12 +133,9 @@
|
|||
let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
|
||||
const highlightStart = content.indexOf('<span class="algolia-highlight">');
|
||||
if (highlightStart > -1) {
|
||||
const highlightEnd = content.lastIndexOf('</span>');
|
||||
const startEllipsis = highlightStart - 15 > 0;
|
||||
const endEllipsis = highlightEnd + 22 < content.length;
|
||||
content = (startEllipsis ? '...' : '') +
|
||||
content.slice(Math.max(0, highlightStart - 15), Math.min(highlightEnd + 22, content.length)) +
|
||||
(endEllipsis ? '...' : '');
|
||||
content.slice(Math.max(0, highlightStart - 15), content.length);
|
||||
} else if (content.indexOf('|') > -1) {
|
||||
content = '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -245,6 +245,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
| placeholder | placeholder in non-range mode | string | — | — |
|
||||
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Provide a list of fixed time for users to choose.
|
|||
|
||||
Can pick an arbitrary time.
|
||||
|
||||
:::demo Use `el-time-picker` label, and you can limit the time range by using `selectableRange`.
|
||||
:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -53,13 +53,22 @@ Can pick an arbitrary time.
|
|||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40)
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -112,12 +121,20 @@ If start time is picked at first, then the end time will change accordingly.
|
|||
|
||||
Can pick an arbitrary time range.
|
||||
|
||||
:::demo We can pick a time range by adding an `is-range` attribute.
|
||||
:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value3"
|
||||
v-model="value4"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
|
|
@ -128,7 +145,8 @@ Can pick an arbitrary time range.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -142,7 +160,9 @@ Can pick an arbitrary time range.
|
|||
return {
|
||||
value1: '',
|
||||
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, 18, 40),
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
|
|
@ -156,11 +176,13 @@ Can pick an arbitrary time range.
|
|||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
| clearable | whether to show clear button | boolean | — | true |
|
||||
| size | size of Input | string | medium / small / mini | — |
|
||||
| placeholder | placeholder in non-range mode | string | — | — |
|
||||
| start-placeholder | placeholder for the start time in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end time in range mode | string | — | — |
|
||||
| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
|
||||
| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
|
||||
| value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| align | alignment | left / center / right | left |
|
||||
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
|
||||
|
|
|
|||
|
|
@ -244,6 +244,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 显示在输入框中的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
可以选择任意时间
|
||||
|
||||
:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围
|
||||
:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
|
|
@ -52,13 +52,22 @@
|
|||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40)
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -111,12 +120,21 @@
|
|||
|
||||
可选择任意的时间范围
|
||||
|
||||
:::demo 添加`is-range`属性即可选择时间范围
|
||||
:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value3"
|
||||
v-model="value4"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
|
|
@ -128,7 +146,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -142,7 +161,9 @@
|
|||
return {
|
||||
value1: '',
|
||||
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, 18, 40),
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
|
|
@ -161,6 +182,8 @@
|
|||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||||
| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||||
| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
|
||||
| align | 对齐方式 | string | left / center / right | left |
|
||||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
|
|
|
|||
|
|
@ -17,8 +17,20 @@
|
|||
size="mini">
|
||||
</el-input>
|
||||
</span>
|
||||
<a href="JavaScript:" class="el-color-dropdown__link-btn" @click="$emit('clear')">{{ t('el.colorpicker.clear') }}</a>
|
||||
<button class="el-color-dropdown__btn" @click="confirmValue">{{ t('el.colorpicker.confirm') }}</button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
class="el-color-dropdown__link-btn"
|
||||
@click="$emit('clear')">
|
||||
{{ t('el.colorpicker.clear') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
class="el-color-dropdown__btn"
|
||||
@click="confirmValue">
|
||||
{{ t('el.colorpicker.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,119 @@
|
|||
<template>
|
||||
<div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('hours')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="hours">
|
||||
<li
|
||||
@click="handleClick('hours', { value: hour, disabled: disabled })"
|
||||
v-for="(disabled, hour) in hoursList"
|
||||
track-by="hour"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('minutes')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="minutes">
|
||||
<li
|
||||
@click="handleClick('minutes', { value: key, disabled: false })"
|
||||
v-for="(minute, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
v-show="showSeconds"
|
||||
@mouseenter.native="emitSelectRange('seconds')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="seconds">
|
||||
<li
|
||||
@click="handleClick('seconds', { value: key, disabled: false })"
|
||||
v-for="(second, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<template v-if="!arrowControl">
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('hours')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="hours">
|
||||
<li
|
||||
@click="handleClick('hours', { value: hour, disabled: disabled })"
|
||||
v-for="(disabled, hour) in hoursList"
|
||||
track-by="hour"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + hour).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('minutes')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="minutes">
|
||||
<li
|
||||
@click="handleClick('minutes', { value: key, disabled: false })"
|
||||
v-for="(minute, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === minutes }">{{ ('0' + key).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
v-show="showSeconds"
|
||||
@mouseenter.native="emitSelectRange('seconds')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="seconds">
|
||||
<li
|
||||
@click="handleClick('seconds', { value: key, disabled: false })"
|
||||
v-for="(second, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === seconds }">{{ ('0' + key).slice(-2) }}</li>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<template v-if="arrowControl">
|
||||
<div
|
||||
@mouseenter="emitSelectRange('hours')"
|
||||
class="el-time-spinner__wrapper is-arrow">
|
||||
<i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
|
||||
<i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
|
||||
<ul class="el-time-spinner__list" ref="hours">
|
||||
<li
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
|
||||
v-for="hour in arrowHourList">
|
||||
{{ hour === undefined ? '' : ('0' + hour).slice(-2) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
@mouseenter="emitSelectRange('minutes')"
|
||||
class="el-time-spinner__wrapper is-arrow">
|
||||
<i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
|
||||
<i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
|
||||
<ul class="el-time-spinner__list" ref="minutes">
|
||||
<li
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': minute === minutes }"
|
||||
v-for="minute in arrowMinuteList">
|
||||
{{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
@mouseenter="emitSelectRange('seconds')"
|
||||
class="el-time-spinner__wrapper is-arrow"
|
||||
v-if="showSeconds">
|
||||
<i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
|
||||
<i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
|
||||
<ul class="el-time-spinner__list" ref="seconds">
|
||||
<li
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': second === seconds }"
|
||||
v-for="second in arrowSecondList">
|
||||
{{ second === undefined ? '' : ('0' + second).slice(-2) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import { getRangeHours, modifyTime } from '../util';
|
||||
import ElScrollbar from 'element-ui/packages/scrollbar';
|
||||
import RepeatClick from 'element-ui/src/directives/repeat-click';
|
||||
|
||||
export default {
|
||||
components: { ElScrollbar },
|
||||
|
||||
directives: {
|
||||
repeatClick: RepeatClick
|
||||
},
|
||||
|
||||
props: {
|
||||
date: {},
|
||||
defaultValue: {}, // reserved for future use
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
arrowControl: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -75,6 +128,30 @@
|
|||
},
|
||||
hoursList() {
|
||||
return getRangeHours(this.selectableRange);
|
||||
},
|
||||
arrowHourList() {
|
||||
const hours = this.hours;
|
||||
return [
|
||||
hours > 0 ? hours - 1 : undefined,
|
||||
hours,
|
||||
hours < 23 ? hours + 1 : undefined
|
||||
];
|
||||
},
|
||||
arrowMinuteList() {
|
||||
const minutes = this.minutes;
|
||||
return [
|
||||
minutes > 0 ? minutes - 1 : undefined,
|
||||
minutes,
|
||||
minutes < 59 ? minutes + 1 : undefined
|
||||
];
|
||||
},
|
||||
arrowSecondList() {
|
||||
const seconds = this.seconds;
|
||||
return [
|
||||
seconds > 0 ? seconds - 1 : undefined,
|
||||
seconds,
|
||||
seconds < 59 ? seconds + 1 : undefined
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -87,11 +164,19 @@
|
|||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.bindScrollEvent();
|
||||
!this.arrowControl && this.bindScrollEvent();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
increase() {
|
||||
this.scrollDown(1);
|
||||
},
|
||||
|
||||
decrease() {
|
||||
this.scrollDown(-1);
|
||||
},
|
||||
|
||||
modifyDateField(type, value) {
|
||||
switch (type) {
|
||||
case 'hours': this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds)); break;
|
||||
|
|
@ -153,6 +238,7 @@
|
|||
},
|
||||
|
||||
adjustSpinner(type, value) {
|
||||
if (this.arrowControl) return;
|
||||
const el = this.$refs[type].wrap;
|
||||
if (el) {
|
||||
el.scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@
|
|||
<time-picker
|
||||
ref="minTimePicker"
|
||||
@pick="handleMinTimePick"
|
||||
:time-arrow-control="arrowControl"
|
||||
:visible="minTimePickerVisible"
|
||||
@mounted="$refs.minTimePicker.format=timeFormat">
|
||||
</time-picker>
|
||||
|
|
@ -70,6 +71,7 @@
|
|||
<time-picker
|
||||
ref="maxTimePicker"
|
||||
@pick="handleMaxTimePick"
|
||||
:time-arrow-control="arrowControl"
|
||||
:visible="maxTimePickerVisible"
|
||||
@mounted="$refs.maxTimePicker.format=timeFormat">
|
||||
</time-picker>
|
||||
|
|
@ -273,7 +275,8 @@
|
|||
firstDayOfWeek: 7,
|
||||
minTimePickerVisible: false,
|
||||
maxTimePickerVisible: false,
|
||||
format: ''
|
||||
format: '',
|
||||
arrowControl: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
<time-picker
|
||||
ref="timepicker"
|
||||
:date="date"
|
||||
:time-arrow-control="arrowControl"
|
||||
@pick="handleTimePick"
|
||||
:visible="timePickerVisible"
|
||||
@mounted="$refs.timepicker.format=timeFormat">
|
||||
|
|
@ -439,7 +440,8 @@
|
|||
firstDayOfWeek: 7,
|
||||
showWeekNumber: false,
|
||||
timePickerVisible: false,
|
||||
format: ''
|
||||
format: '',
|
||||
arrowControl: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@
|
|||
<div class="el-time-range-picker__cell">
|
||||
<div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
|
||||
<div
|
||||
:class="{ 'has-seconds': showSeconds }"
|
||||
:class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
|
||||
class="el-time-range-picker__body el-time-panel__content">
|
||||
<time-spinner
|
||||
ref="minSpinner"
|
||||
:show-seconds="showSeconds"
|
||||
@change="handleMinChange"
|
||||
:arrow-control="arrowControl"
|
||||
@select-range="setMinSelectionRange"
|
||||
:date="minDate">
|
||||
</time-spinner>
|
||||
|
|
@ -24,12 +25,13 @@
|
|||
<div class="el-time-range-picker__cell">
|
||||
<div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
|
||||
<div
|
||||
:class="{ 'has-seconds': showSeconds }"
|
||||
:class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
|
||||
class="el-time-range-picker__body el-time-panel__content">
|
||||
<time-spinner
|
||||
ref="maxSpinner"
|
||||
:show-seconds="showSeconds"
|
||||
@change="handleMaxChange"
|
||||
:arrow-control="arrowControl"
|
||||
@select-range="setMaxSelectionRange"
|
||||
:date="maxDate">
|
||||
</time-spinner>
|
||||
|
|
@ -111,7 +113,8 @@
|
|||
defaultValue: null,
|
||||
format: 'HH:mm:ss',
|
||||
visible: false,
|
||||
selectionRange: [0, 2]
|
||||
selectionRange: [0, 2],
|
||||
arrowControl: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<time-spinner
|
||||
ref="spinner"
|
||||
@change="handleChange"
|
||||
:arrow-control="useArrow"
|
||||
:show-seconds="showSeconds"
|
||||
@select-range="setSelectionRange"
|
||||
:date="date">
|
||||
|
|
@ -31,16 +32,18 @@
|
|||
<script type="text/babel">
|
||||
import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from '../util';
|
||||
import Locale from 'element-ui/src/mixins/locale';
|
||||
import TimeSpinner from '../basic/time-spinner';
|
||||
|
||||
export default {
|
||||
mixins: [Locale],
|
||||
|
||||
components: {
|
||||
TimeSpinner: require('../basic/time-spinner')
|
||||
TimeSpinner
|
||||
},
|
||||
|
||||
props: {
|
||||
visible: Boolean
|
||||
visible: Boolean,
|
||||
timeArrowControl: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -86,13 +89,17 @@
|
|||
oldValue: new Date(),
|
||||
selectableRange: [],
|
||||
selectionRange: [0, 2],
|
||||
disabled: false
|
||||
disabled: false,
|
||||
arrowControl: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
showSeconds() {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
useArrow() {
|
||||
return this.arrowControl || this.timeArrowControl || false;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -662,6 +662,7 @@ export default {
|
|||
this.picker.width = this.reference.getBoundingClientRect().width;
|
||||
this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
|
||||
this.picker.selectionMode = this.selectionMode;
|
||||
this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
|
||||
if (this.format) {
|
||||
this.picker.format = this.format;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ export default {
|
|||
type: {
|
||||
type: String,
|
||||
default: 'date'
|
||||
}
|
||||
},
|
||||
timeArrowControl: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ export default {
|
|||
name: 'ElTimePicker',
|
||||
|
||||
props: {
|
||||
isRange: Boolean
|
||||
isRange: Boolean,
|
||||
arrowControl: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -53,35 +53,15 @@
|
|||
</template>
|
||||
<script>
|
||||
import ElInput from 'element-ui/packages/input';
|
||||
import { once, on } from 'element-ui/src/utils/dom';
|
||||
import debounce from 'throttle-debounce/debounce';
|
||||
import Focus from 'element-ui/src/mixins/focus';
|
||||
import RepeatClick from 'element-ui/src/directives/repeat-click';
|
||||
|
||||
export default {
|
||||
name: 'ElInputNumber',
|
||||
mixins: [Focus('input')],
|
||||
directives: {
|
||||
repeatClick: {
|
||||
bind(el, binding, vnode) {
|
||||
let interval = null;
|
||||
let startTime;
|
||||
const handler = () => vnode.context[binding.expression].apply();
|
||||
const clear = () => {
|
||||
if (new Date() - startTime < 100) {
|
||||
handler();
|
||||
}
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
};
|
||||
|
||||
on(el, 'mousedown', () => {
|
||||
startTime = new Date();
|
||||
once(document, 'mouseup', clear);
|
||||
clearInterval(interval);
|
||||
interval = setInterval(handler, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
repeatClick: RepeatClick
|
||||
},
|
||||
components: {
|
||||
ElInput
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
import Loading from './loading.vue';
|
||||
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
|
||||
const Mask = Vue.extend(require('./loading.vue'));
|
||||
const Mask = Vue.extend(Loading);
|
||||
|
||||
exports.install = Vue => {
|
||||
if (Vue.prototype.$isServer) return;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import Vue from 'vue';
|
||||
import Main from './main.vue';
|
||||
import { PopupManager } from 'element-ui/src/utils/popup';
|
||||
import { isVNode } from 'element-ui/src/utils/vdom';
|
||||
let MessageConstructor = Vue.extend(require('./main.vue'));
|
||||
let MessageConstructor = Vue.extend(Main);
|
||||
|
||||
let instance;
|
||||
let instances = [];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import Vue from 'vue';
|
||||
import Main from './main.vue';
|
||||
import { PopupManager } from 'element-ui/src/utils/popup';
|
||||
import { isVNode } from 'element-ui/src/utils/vdom';
|
||||
const NotificationConstructor = Vue.extend(require('./main.vue'));
|
||||
const NotificationConstructor = Vue.extend(Main);
|
||||
|
||||
let instance;
|
||||
let instances = [];
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
.el-breadcrumb__inner a {
|
||||
&, &:hover {
|
||||
font-weight: normal;
|
||||
color: $--font-color-base;
|
||||
color: $--color-text-regular;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,6 @@ $--fill-base: $--color-white;
|
|||
$--font-size-base: 14px;
|
||||
$--font-size-small: 13px;
|
||||
$--font-size-large: 18px;
|
||||
$--font-color-base: #5a5e66;
|
||||
$--font-color-disabled-base: #bbb;
|
||||
$--font-weight-primary: 500;
|
||||
$--font-line-height-primary: 24px;
|
||||
|
|
@ -216,7 +215,7 @@ $--select-tag-height: 24px;
|
|||
$--select-tag-color: $--color-white;
|
||||
$--select-tag-background: $--color-primary;
|
||||
|
||||
$--select-option-color: $--font-color-base;
|
||||
$--select-option-color: $--color-text-regular;
|
||||
$--select-option-disabled-color: $--color-text-placeholder;
|
||||
$--select-option-disabled-background: $--color-white;
|
||||
$--select-option-height: 34px;
|
||||
|
|
@ -309,7 +308,7 @@ $--notification-danger-color: $--color-danger;
|
|||
/* Input
|
||||
-------------------------- */
|
||||
$--input-font-size: $--font-size-base;
|
||||
$--input-color: $--font-color-base;
|
||||
$--input-color: $--color-text-regular;
|
||||
$--input-width: 140px;
|
||||
$--input-height: 40px;
|
||||
$--input-border: $--border-base;
|
||||
|
|
@ -350,10 +349,10 @@ $--cascader-menu-radius: $--border-radius-base;
|
|||
$--cascader-menu-border: $--border-base;
|
||||
$--cascader-menu-border-color: $--border-color-base;
|
||||
$--cascader-menu-border-width: $--border-width-base;
|
||||
$--cascader-menu-color: $--font-color-base;
|
||||
$--cascader-menu-color: $--color-text-regular;
|
||||
$--cascader-menu-option-color-active: $--color-text-secondary;
|
||||
$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12);
|
||||
$--cascader-menu-option-color-hover: $--font-color-base;
|
||||
$--cascader-menu-option-color-hover: $--color-text-regular;
|
||||
$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06);
|
||||
$--cascader-menu-option-color-disabled: #999;
|
||||
$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06);
|
||||
|
|
@ -377,8 +376,8 @@ $--group-title-width: 66px;
|
|||
$--tab-font-size: $--font-size-base;
|
||||
$--tab-border-line: 1px solid #e4e4e4;
|
||||
$--tab-header-color-active: $--color-text-secondary;
|
||||
$--tab-header-color-hover: $--font-color-base;
|
||||
$--tab-header-color: $--font-color-base;
|
||||
$--tab-header-color-hover: $--color-text-regular;
|
||||
$--tab-header-color: $--color-text-regular;
|
||||
$--tab-header-fill-active: rgba($--color-black, 0.06);
|
||||
$--tab-header-fill-hover: rgba($--color-black, 0.06);
|
||||
$--tab-vertical-header-width: 90px;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,57 @@
|
|||
& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@include when(arrow) {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.el-time-spinner__list {
|
||||
transform: translateY(-32px);
|
||||
}
|
||||
|
||||
.el-time-spinner__item:hover:not(.disabled):not(.active) {
|
||||
background: $--color-white;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(arrow) {
|
||||
font-size: 12px;
|
||||
color: $--color-text-secondary;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: $--index-normal;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
&.el-icon-arrow-up {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.el-icon-arrow-down {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
&.el-input {
|
||||
width: 70%;
|
||||
|
||||
.el-input__inner {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(list) {
|
||||
|
|
@ -43,7 +94,7 @@
|
|||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
color: $--font-color-base;
|
||||
color: $--color-text-regular;
|
||||
|
||||
&:hover:not(.disabled):not(.active) {
|
||||
background: $--background-color-base;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
padding: 0 20px;
|
||||
margin: 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--font-color-base;
|
||||
color: $--color-text-regular;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ a {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $--font-color-base;
|
||||
color: $--color-text-regular;
|
||||
font-weight: inherit;
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
<script>
|
||||
import TreeStore from './model/tree-store';
|
||||
import ElTreeNode from './tree-node.vue';
|
||||
import {t} from 'element-ui/src/locale';
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
mixins: [emitter],
|
||||
|
||||
components: {
|
||||
ElTreeNode: require('./tree-node.vue')
|
||||
ElTreeNode
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { once, on } from 'element-ui/src/utils/dom';
|
||||
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
let interval = null;
|
||||
let startTime;
|
||||
const handler = () => vnode.context[binding.expression].apply();
|
||||
const clear = () => {
|
||||
if (new Date() - startTime < 100) {
|
||||
handler();
|
||||
}
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
};
|
||||
|
||||
on(el, 'mousedown', () => {
|
||||
startTime = new Date();
|
||||
once(document, 'mouseup', clear);
|
||||
clearInterval(interval);
|
||||
interval = setInterval(handler, 100);
|
||||
});
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue