Skip to content

Commit 26e8b21

Browse files
author
levy
committed
Merge branch 'dev'
2 parents ee04dd0 + 72abeb8 commit 26e8b21

10 files changed

Lines changed: 597 additions & 175 deletions

File tree

‎examples/docs/zh-CN/timeline.md‎

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,15 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
1414
<el-radio-group v-model="reverse">
1515
<el-radio :label="true">倒序</el-radio>
1616
<el-radio :label="false">正序</el-radio>
17+
</el-radio-group><br />
18+
排列：
19+
<el-radio-group v-model="direction">
20+
<el-radio label="vertical">竖排</el-radio>
21+
<el-radio label="horizontal">横排</el-radio>
1722
</el-radio-group>
1823
</div>
1924

20-
<el-timeline :reverse="reverse">
25+
<el-timeline :reverse="reverse" :direction="direction">
2126
<el-timeline-item
2227
v-for="(activity, index) in activities"
2328
:key="index"
@@ -32,6 +37,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
3237
data() {
3338
return {
3439
reverse: true,
40+
direction: 'vertical',
3541
activities: [{
3642
content: '活动按期开始',
3743
timestamp: '2018-04-15'
@@ -56,7 +62,14 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
5662
:::demo
5763
```html
5864
<div class="block">
59-
<el-timeline>
65+
<div class="radio">
66+
排列：
67+
<el-radio-group v-model="direction">
68+
<el-radio label="vertical">竖排</el-radio>
69+
<el-radio label="horizontal">横排</el-radio>
70+
</el-radio-group>
71+
</div>
72+
<el-timeline :direction="direction">
6073
<el-timeline-item
6174
v-for="(activity, index) in activities"
6275
:key="index"
@@ -74,6 +87,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
7487
export default {
7588
data() {
7689
return {
90+
direction: 'vertical',
7791
activities: [{
7892
content: '支持使用图标',
7993
timestamp: '2018-04-12 20:46',
@@ -106,7 +120,14 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
106120
:::demo
107121
```html
108122
<div class="block">
109-
<el-timeline>
123+
<div class="radio">
124+
排列：
125+
<el-radio-group v-model="direction">
126+
<el-radio label="vertical">竖排</el-radio>
127+
<el-radio label="horizontal">横排</el-radio>
128+
</el-radio-group>
129+
</div>
130+
<el-timeline :direction="direction">
110131
<el-timeline-item timestamp="2018/4/12" placement="top">
111132
<el-card>
112133
<h4>更新 Github 模板</h4>
@@ -127,13 +148,65 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
127148
</el-timeline-item>
128149
</el-timeline>
129150
</div>
151+
152+
<script>
153+
export default{
154+
data(){
155+
return {
156+
direction: 'vertical'
157+
}
158+
}
159+
}
160+
</script>
161+
:::
162+
163+
### ⾃定义时间戳内容
164+
165+
设置slot=timestamp可以自定义内容
166+
167+
:::demo
168+
```html
169+
<div class="block">
170+
<div class="radio">
171+
排列：
172+
<el-radio-group v-model="direction">
173+
<el-radio label="vertical">竖排</el-radio>
174+
<el-radio label="horizontal">横排</el-radio>
175+
</el-radio-group>
176+
</div>
177+
<el-timeline :direction="direction">
178+
<el-timeline-item timestamp="2018/4/12" placement="top">
179+
<el-button slot="timestamp" type="text">2018/4/12</el-button>
180+
创建成功
181+
</el-timeline-item>
182+
<el-timeline-item timestamp="2018/4/3" placement="top">
183+
<el-button slot="timestamp" type="text">2018/4/3</el-button>
184+
通过审核
185+
</el-timeline-item>
186+
<el-timeline-item timestamp="2018/4/2" placement="top">
187+
<el-button slot="timestamp" type="text">2018/4/2</el-button>
188+
活动按期开始
189+
</el-timeline-item>
190+
</el-timeline>
191+
</div>
192+
193+
<script>
194+
export default{
195+
data(){
196+
return {
197+
direction: 'vertical'
198+
}
199+
}
200+
}
201+
</script>
130202
```
131203
:::
132204

133205
### Timeline Attributes
134206
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
135207
|---------- |-------- |---------- |------------- |-------- |
136208
| reverse | 指定节点排序方向，默认为正序 | boolean | — | false |
209+
| direction | 排列方向，默认为竖向 | string| vertical/horizontal | vertical |
137210

138211
### Timeline-item Attributes
139212
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
@@ -151,3 +224,4 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
151224
|------|--------|
152225
| — | Timeline-Item 的内容 |
153226
| dot | 自定义节点 |
227+
| timestamp | 时间戳内容 |

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"babel-helper-vue-jsx-merge-props": "^2.0.0",
7070
"classnames": "^2.2.6",
7171
"deepmerge": "^1.2.0",
72+
"lodash.isequal": "^4.5.0",
7273
"normalize-wheel": "^1.0.1",
7374
"omit.js": "^1.0.2",
7475
"raf": "^3.4.1",
@@ -116,7 +117,7 @@
116117
"gulp": "^4.0.0",
117118
"gulp-autoprefixer": "^6.0.0",
118119
"gulp-cssmin": "^0.2.0",
119-
"gulp-sass": "^4.0.2",
120+
"gulp-sass": "^4.1.0",
120121
"highlight.js": "^9.3.0",
121122
"html-webpack-plugin": "^3.2.0",
122123
"husky": "1.3.1",
@@ -136,7 +137,6 @@
136137
"markdown-it-container": "^2.0.0",
137138
"mini-css-extract-plugin": "^0.4.1",
138139
"mocha": "^6.0.2",
139-
"node-sass": "^4.13.1",
140140
"optimize-css-assets-webpack-plugin": "^5.0.1",
141141
"postcss": "^7.0.14",
142142
"progress-bar-webpack-plugin": "^1.11.0",

‎packages/date-picker/src/panel/date-range.vue‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,11 @@
352352
},
353353
354354
watch: {
355+
visible(v) {
356+
if (!v) {
357+
this.rangeState.selecting = false;
358+
}
359+
},
355360
minDate(val) {
356361
this.dateUserInput.min = null;
357362
this.timeUserInput.min = null;
@@ -536,6 +541,35 @@
536541
537542
handleRangePick(val, close = true) {
538543
const defaultTime = this.defaultTime || [];
544+
545+
let save = false;
546+
const firstPick = val.minDate && !val.maxDate;
547+
548+
if (this.minDate && this.maxDate && this.inputType) {
549+
if (this.inputType === 'min') {
550+
let newDate = '';
551+
552+
if (firstPick) {
553+
newDate = val.minDate;
554+
} else {
555+
newDate = val.minDate <= this.minDate ? val.minDate : val.maxDate;
556+
}
557+
558+
if (newDate < this.maxDate) {
559+
val.minDate = newDate;
560+
val.maxDate = this.maxDate;
561+
save = true;
562+
}
563+
} else if (this.inputType === 'max') {
564+
const newDate = firstPick ? val.minDate : val.maxDate;
565+
if (newDate > this.minDate) {
566+
val.minDate = this.minDate;
567+
val.maxDate = newDate;
568+
save = true;
569+
}
570+
}
571+
}
572+
539573
const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
540574
const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
541575
@@ -545,12 +579,18 @@
545579
this.onPick && this.onPick(val);
546580
this.maxDate = maxDate;
547581
this.minDate = minDate;
548-
549582
// workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
550583
setTimeout(() => {
551584
this.maxDate = maxDate;
552585
this.minDate = minDate;
553586
}, 10);
587+
588+
if (save) {
589+
this.inputType = null;
590+
close = false;
591+
this.handleConfirm(true);
592+
}
593+
554594
if (!close || this.showTime) return;
555595
this.handleConfirm();
556596
},

‎packages/date-picker/src/picker.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
:name="name && name[0]"
5858
@input="handleStartInput"
5959
@change="handleStartChange"
60-
@focus="handleFocus"
60+
@focus="handleFocus('min')"
6161
class="el-range-input">
6262
<slot name="range-separator">
6363
<span class="el-range-separator">{{ rangeSeparator }}</span>
@@ -72,7 +72,7 @@
7272
:name="name && name[1]"
7373
@input="handleEndInput"
7474
@change="handleEndChange"
75-
@focus="handleFocus"
75+
@focus="handleFocus('max')"
7676
class="el-range-input">
7777
<i
7878
@click="handleClickIcon"
@@ -401,7 +401,8 @@ export default {
401401
showClose: false,
402402
userInput: null,
403403
valueOnOpen: null, // value when picker opens, used to determine whether to emit change
404-
unwatchPickerOptions: null
404+
unwatchPickerOptions: null,
405+
inputType: null
405406
};
406407
},
407408
@@ -724,10 +725,11 @@ export default {
724725
this.userInput = initialValue === '' ? null : initialValue;
725726
},
726727
727-
handleFocus() {
728+
handleFocus(inputType) {
728729
const type = this.type;
729730
730731
if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
732+
this.inputType = inputType;
731733
this.pickerVisible = true;
732734
}
733735
this.$emit('focus', this);
@@ -814,6 +816,7 @@ export default {
814816
815817
this.picker.value = this.parsedValue;
816818
this.picker.resetView && this.picker.resetView();
819+
this.picker.inputType = this.inputType;
817820
818821
this.$nextTick(() => {
819822
this.picker.adjustSpinners && this.picker.adjustSpinners();

‎packages/theme-chalk/src/timeline-item.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
top: -3px;
1212
}
1313

14+
@include e(horizontal){
15+
position: relative;
16+
}
17+
1418
@include e(tail) {
1519
position: absolute;
1620
left: 4px;
@@ -83,4 +87,63 @@
8387
margin-top: 8px;
8488
}
8589
}
90+
91+
&.is-horizontal {
92+
padding-bottom: 0;
93+
padding-right: 20px;
94+
95+
@include e(wrapper){
96+
& > .el-timeline-item__horizontal{
97+
& > {
98+
@include e(tail) {
99+
left: 0;
100+
top: 5px;
101+
border-left: 0;
102+
height: 0;
103+
width: calc(100% + 20px + 28px);
104+
border-bottom: 2px solid $--timeline-node-color;
105+
}
106+
107+
@include e(node) {
108+
109+
@include m(normal) {
110+
left: 50%;
111+
transform: translateX(-50%);
112+
}
113+
114+
@include m(large) {
115+
left: 50%;
116+
transform: translateX(-50%);
117+
}
118+
}
119+
}
120+
}
121+
}
122+
123+
@include e(horizontal){
124+
display: block;
125+
margin-bottom: 28px;
126+
}
127+
128+
@include e(dot) {
129+
position: absolute;
130+
display: flex;
131+
justify-content: center;
132+
align-items: center;
133+
}
134+
135+
@include e(content) {
136+
margin-bottom: 8px;
137+
}
138+
139+
@include e(timestamp) {
140+
@include when(top) {
141+
margin-bottom: 8px;
142+
padding-top: 4px;
143+
}
144+
@include when(bottom) {
145+
margin-top: 8px;
146+
}
147+
}
148+
}
86149
}

0 commit comments

Comments
 (0)