Skip to content

Commit 7794b44

Browse files
snowlockedsnowlocked
authored
feat: timeline组件增加横版模式及时间戳插槽 (#69)
1 parent 19a59db commit 7794b44

8 files changed

Lines changed: 650 additions & 171 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: 3 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,11 +137,11 @@
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",
143143
"rimraf": "^2.5.4",
144+
"sass": "^1.26.10",
144145
"sass-loader": "^7.1.0",
145146
"select-version-cli": "^0.0.2",
146147
"sinon": "^7.2.7",

‎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
}

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

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,51 @@
66
font-size: $--font-size-base;
77
list-style: none;
88

9-
& .el-timeline-item:last-child {
9+
&.is-horizontal{
10+
display: flex;
11+
12+
& > .el-timeline-item{
13+
& > .el-timeline-item__wrapper{
14+
text-align:center;
15+
}
16+
}
17+
18+
& > .el-timeline-item:first-child{
19+
.el-timeline-item__wrapper{
20+
& > .el-timeline-item__horizontal{
21+
& > {
22+
.el-timeline-item__tail{
23+
width: calc(50% + 20px + 28px);
24+
left: 50%;
25+
}
26+
}
27+
}
28+
}
29+
}
30+
31+
& .el-timeline-item:last-child {
32+
.el-timeline-item__wrapper{
33+
& > .el-timeline-item__horizontal{
34+
& > {
35+
.el-timeline-item__tail{
36+
width: 50%;
37+
}
38+
}
39+
}
40+
}
41+
42+
& .el-timeline-item__tail {
43+
display: block;
44+
}
45+
}
46+
}
47+
48+
&.is-vertical{
49+
& .el-timeline-item.is-vertical:last-child {
1050
& .el-timeline-item__tail {
1151
display: none;
1252
}
1353
}
54+
}
55+
1456
}

‎packages/timeline/src/dot.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div
3+
class="el-timeline-item__node"
4+
:class="[
5+
`el-timeline-item__node--${size || ''}`,
6+
`el-timeline-item__node--${type || ''}`
7+
]"
8+
:style="{
9+
backgroundColor: color
10+
}"
11+
>
12+
<i v-if="icon" class="el-timeline-item__icon" :class="icon"></i>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'ElTimelineDot',
19+
20+
props: {
21+
size: {
22+
type: String,
23+
default: 'normal'
24+
},
25+
26+
type: String,
27+
28+
color: String,
29+
30+
icon: String
31+
}
32+
};
33+
</script>

0 commit comments

Comments
 (0)