Skip to content

Commit 1446ac8

Browse files
kouchaokouchao
committed
新增 时间线组件，新增 时间线demo
1 parent 9694cd3 commit 1446ac8

File tree

8 files changed

+162
-2
lines changed

8 files changed

+162
-2
lines changed

‎src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,9 @@
7070
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
7171
<lay-menu-child-item title="进度条" :to="{name: 'progress'}"></lay-menu-child-item>
7272
<lay-menu-child-item title="面板" :to="{name: 'panel'}"></lay-menu-child-item>
73-
7473
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
74+
<lay-menu-child-item title="时间线" :to="{name: 'timeline'}"></lay-menu-child-item>
75+
7576
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7677

7778
</lay-menu-item>

‎src/components/timeline-item/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/1
3+
*/
4+
5+
import LayTimelineItem from '../timeline/src/timeline-item';
6+
7+
/* istanbul ignore next */
8+
LayTimelineItem.install = function(Vue) {
9+
Vue.component(LayTimelineItem.name, LayTimelineItem);
10+
};
11+
12+
export default LayTimelineItem;

‎src/components/timeline/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/1
3+
*/
4+
5+
import LayTimeline from './src/timeline';
6+
7+
/* istanbul ignore next */
8+
LayTimeline.install = function(Vue) {
9+
Vue.component(LayTimeline.name, LayTimeline);
10+
};
11+
12+
export default LayTimeline;

‎src/components/timeline/src/timeline-item.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<li class="layui-timeline-item">
3+
<i class="layui-icon layui-timeline-axis"
4+
:class="icon">
5+
</i>
6+
<div class="layui-timeline-content layui-text">
7+
<div v-if="simple" class="layui-timeline-title">
8+
<slot name="title">{{title}}</slot>
9+
</div>
10+
<h3 v-else class="layui-timeline-title">
11+
<slot name="title">{{title}}</slot>
12+
</h3>
13+
<slot></slot>
14+
</div>
15+
</li>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: "LayTimelineItem",
21+
props: {
22+
icon: {
23+
type: String,
24+
default(){
25+
return 'layui-icon-circle'
26+
}
27+
},
28+
title: String,
29+
simple: {
30+
type: Boolean,
31+
default() {
32+
return false
33+
}
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style scoped>
40+
41+
</style>

‎src/components/timeline/src/timeline.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<ul class="layui-timeline">
3+
<slot></slot>
4+
</ul>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "LayTimeline"
10+
}
11+
</script>
12+
13+
<style scoped>
14+
15+
</style>

‎src/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ import LayProgress from '@/components/progress'
4040
import LayCard from '@/components/card'
4141
import LayCollapse from '@/components/collapse'
4242
import LayCollapseItem from '@/components/collapse-item'
43+
import LayTimeline from '@/components/timeline'
44+
import LayTimelineItem from '@/components/timeline-item'
4345

4446

4547

@@ -83,7 +85,9 @@ const layui = {
8385
LayProgress,
8486
LayCard,
8587
LayCollapse,
86-
LayCollapseItem
88+
LayCollapseItem,
89+
LayTimeline,
90+
LayTimelineItem
8791
]
8892
components.forEach(function (component) {
8993
Vue.component(component.name, component)

‎src/router.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Badge from './views/Badge.vue'
1010
import Auxiliar from './views/Auxiliar.vue'
1111
import Progress from './views/Progress.vue'
1212
import Panel from './views/Panel.vue'
13+
import Timeline from './views/Timeline.vue'
1314

1415
Vue.use(Router)
1516

@@ -64,6 +65,11 @@ export default new Router({
6465
path: '/panel',
6566
name: 'panel',
6667
component: Panel
68+
},
69+
{
70+
path: '/timeline',
71+
name: 'timeline',
72+
component: Timeline
6773
}
6874

6975

‎src/views/Timeline.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div>
3+
4+
<lay-block title="常规时间线"></lay-block>
5+
<lay-timeline>
6+
<lay-timeline-item title="8月18日">
7+
<p>
8+
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
9+
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
10+
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔
11+
</p>
12+
</lay-timeline-item>
13+
<lay-timeline-item title="8月16日">
14+
<p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
15+
<ul>
16+
<li>《登高》</li>
17+
<li>《茅屋为秋风所破歌》</li>
18+
</ul>
19+
</lay-timeline-item>
20+
<lay-timeline-item title="8月15日">
21+
<p>
22+
中国人民抗日战争胜利日
23+
<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
24+
<br>铭记、感恩
25+
<br>所有为中华民族浴血奋战的英雄将士
26+
<br>永垂不朽
27+
</p>
28+
</lay-timeline-item>
29+
<lay-timeline-item title="过去" simple></lay-timeline-item>
30+
31+
</lay-timeline>
32+
33+
<lay-block title="简约时间线：大事记"></lay-block>
34+
<lay-timeline>
35+
<lay-timeline-item simple icon="layui-icon-fire">
36+
<slot slot="title">
37+
2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）
38+
</slot>
39+
</lay-timeline-item>
40+
<lay-timeline-item simple>
41+
<slot slot="title">
42+
2017年，layui 里程碑版本 2.0 发布
43+
</slot>
44+
</lay-timeline-item>
45+
<lay-timeline-item simple>
46+
<slot slot="title">
47+
2015年，layui 孵化
48+
</slot>
49+
</lay-timeline-item>
50+
51+
<lay-timeline-item simple icon="layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading-1">
52+
<slot slot="title">
53+
更久前，轮子时代。维护几个独立组件：layer等
54+
</slot>
55+
</lay-timeline-item>
56+
</lay-timeline>
57+
58+
</div>
59+
</template>
60+
61+
<script>
62+
export default {
63+
name: "Timeline"
64+
}
65+
</script>
66+
67+
<style scoped>
68+
69+
</style>

0 commit comments

Comments
 (0)