Skip to content

E
Element
Commit 553e8956 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by Black Wayne
Browse files
Options

TimePicker: add arrow-control

parent 9dcc4eb0
Hide whitespace changes
Inline Side-by-side
Showing with 336 additions and 112 deletions
examples/components/search.vue
View file @ 553e8956
......@@ -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 = '';
}
......
examples/docs/en-US/datetime-picker.md
View file @ 553e8956
......@@ -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 |
......
examples/docs/en-US/time-picker.md
View file @ 553e8956
......@@ -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 | — | — |
......
examples/docs/zh-CN/datetime-picker.md
View file @ 553e8956
......@@ -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 |
......
examples/docs/zh-CN/time-picker.md
View file @ 553e8956
......@@ -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 | — | — |
......
packages/color-picker/src/components/picker-dropdown.vue
View file @ 553e8956
......@@ -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>
......
packages/date-picker/src/basic/time-spinner.vue
View file @ 553e8956
<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);
......
packages/date-picker/src/panel/date-range.vue
View file @ 553e8956
......@@ -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
};
},
......
packages/date-picker/src/panel/date.vue
View file @ 553e8956
......@@ -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
};
},
......
packages/date-picker/src/panel/time-range.vue
View file @ 553e8956
......@@ -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
};
},
......
packages/date-picker/src/panel/time.vue
View file @ 553e8956
......@@ -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;
}
},
......
packages/date-picker/src/picker.vue
View file @ 553e8956
......@@ -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;
}
......
packages/date-picker/src/picker/date-picker.js
View file @ 553e8956
......@@ -18,7 +18,8 @@ export default {
type: {
type: String,
default: 'date'
}
},
timeArrowControl: Boolean
},
watch: {
......
packages/date-picker/src/picker/time-picker.js
View file @ 553e8956
......@@ -8,7 +8,8 @@ export default {
name: 'ElTimePicker',
props: {
isRange: Boolean
isRange: Boolean,
arrowControl: Boolean
},
data() {
......
packages/input-number/src/input-number.vue
View file @ 553e8956
......@@ -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
......
packages/loading/src/directive.js
View file @ 553e8956
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;
......
packages/message/src/main.js
View file @ 553e8956
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 = [];
......
packages/notification/src/main.js
View file @ 553e8956
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 = [];
......
packages/theme-chalk/src/breadcrumb.scss
View file @ 553e8956
......@@ -40,7 +40,7 @@
.el-breadcrumb__inner a {
&, &:hover {
font-weight: normal;
color: $--font-color-base;
color: $--color-text-regular;
cursor: text;
}
}
......
packages/theme-chalk/src/common/var.scss
View file @ 553e8956
......@@ -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;
......
packages/theme-chalk/src/date-picker/time-spinner.scss
View file @ 553e8956
......@@ -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;
......
packages/theme-chalk/src/dropdown.scss
View file @ 553e8956
......@@ -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 {
......
packages/theme-chalk/src/reset.scss
View file @ 553e8956
......@@ -23,7 +23,7 @@ a {
}
h1, h2, h3, h4, h5, h6 {
color: $--font-color-base;
color: $--color-text-regular;
font-weight: inherit;
&:first-child {
......
packages/tree/src/tree.vue
View file @ 553e8956
......@@ -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() {
......
src/directives/repeat-click.js 0 → 100644
View file @ 553e8956
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);
});
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment