[新增] timeline 时间线组件

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>