[新增] timeline 时间线组件

docs/docs/zh-CN/components/timeline.md

@@ -0,0 +1,66 @@
+::: demo
+
+<template>
+    <lay-timeline>
+        <lay-timeline-item title="8月18日">
+            <p>
+                layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
+                <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
+                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
+            </p>
+        </lay-timeline-item>
+        <lay-timeline-item title="8月16日">
+            <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。</p>
+            <ul>
+                <li>《登高》</li>
+                <li>《茅屋为秋风所破歌》</li>
+            </ul>
+        </lay-timeline-item>
+        <lay-timeline-item title="8月15日">
+            <p>
+                中国人民抗日战争胜利日
+                <br>铭记、感恩
+                <br>所有为中华民族浴血奋战的英雄将士
+                <br>永垂不朽
+            </p>
+        </lay-timeline-item>
+    </lay-timeline>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+    <lay-timeline>
+        <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" sample></lay-timeline-item>
+        <lay-timeline-item title="2016年，layui 首个版本发布" sample></lay-timeline-item>
+        <lay-timeline-item title="2015年，layui 孵化" sample></lay-timeline-item>
+    </lay-timeline>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -17,6 +17,7 @@
           <li><router-link to="/zh-CN/components/block">区块</router-link></li>
           <li><router-link to="/zh-CN/components/line">分割</router-link></li>
           <li><router-link to="/zh-CN/components/progress">进度</router-link></li>
+          <li><router-link to="/zh-CN/components/timeline">时间线</router-link></li>
         </ul>
       </lay-side>
       <lay-body>

docs/src/router/zh-CN.ts

@@ -69,6 +69,11 @@ const zhCN = [
         path: '/zh-CN/components/progress',
         component: () => import('../../docs/zh-CN/components/progress.md'),
         meta: { title: '进度' },
+      },
+      {
+        path: '/zh-CN/components/timeline',
+        component: () => import('../../docs/zh-CN/components/timeline.md'),
+        meta: { title: '时间线' },
       }
     ],
   },

src/index.ts

@@ -23,6 +23,8 @@ import LayInput from "./module/input/index"
 import LayBadge from "./module/badge/index"
 import LayBlock from "./module/block/index"
 import LayLine from "./module/line/index"
+import LayTimeline from "./module/timeline/index"
+import LayTimelineItem from "./module/timelineItem/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -44,7 +46,9 @@ const components: Record<string, IDefineComponent> = {
   LayInput,
   LayBadge,
   LayBlock,
-  LayLine
+  LayLine,
+  LayTimeline,
+  LayTimelineItem
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -78,6 +82,8 @@ export {
   LayBadge,
   LayBlock,
   LayLine,
+  LayTimeline,
+  LayTimelineItem,
   install,
 }
 

src/module/timeline/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayTimeline', Component)
+}
+
+export default Component as IDefineComponent

src/module/timeline/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <ul class="layui-timeline">
+      <slot></slot>
+  </ul>
+</template>
+
+<script setup name="LayTimeline" lang="ts">
+
+</script>

src/module/timelineItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayTimelineItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/timelineItem/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <li class="layui-timeline-item">
+    <i class="layui-icon layui-timeline-axis"></i>
+    <div class="layui-timeline-content layui-text">
+      <div v-if="simple" class="layui-timeline-title">
+        {{ title }}
+      </div>
+      <h3 v-else class="layui-timeline-title">
+        {{ title }}
+      </h3>
+      <slot></slot>
+    </div>
+  </li>
+</template>
+
+<script setup name="LayTimelineItem" lang="ts">
+import { defineProps } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+    title: string
+    simple: boolean
+  }>()
+</script>