看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * TimeLineItemProps 时间轴节点 props 类型定义
+ * @description 时间轴节点组件，支持自定义节点颜色、位置
+ */
+export const TimeLineItemProps = {
+    ...baseProps,
+    /** 节点的背景颜色 */
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
+    /** 节点左边图标绝对定位的top值，单位rpx */
+    nodeTop: { type: [String, Number] as PropType<string | number>, default: '' }
+};
+
+export type TimeLineItemProps = ExtractPropTypes<typeof TimeLineItemProps>;
@@ -0,0 +1,89 @@
+<template>
+    <view class="u-time-axis-item" :class="customClass" :style="$u.toStyle(customStyle)">
+        <slot name="content" />
+        <view class="u-time-axis-node" :style="[nodeStyle]">
+            <slot name="node">
+                <view class="u-dot"> </view>
+            </slot>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-time-line-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TimeLineItemProps } from './types';
+import { $u } from '../../';
+
+/**
+ * timeLineItem 时间轴Item
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
+ * @tutorial https://uviewpro.cn/zh/components/timeLine.html
+ * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认var(--u-bg-white)）
+ * @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
+ * @example <u-time-line-item node-top="2">...</u-time-line-item>
+ */
+
+/**
+ * 节点的背景颜色
+ */
+const props = defineProps(TimeLineItemProps);
+
+/**
+ * 计算节点样式
+ * @returns 节点样式对象
+ */
+const nodeStyle = computed(() => {
+    // 生成节点样式对象
+    const style: Record<string, string> = {
+        backgroundColor: props.bgColor
+    };
+    // 如果设置了 nodeTop，则添加 top 属性
+    if (props.nodeTop !== '') style.top = String(props.nodeTop) + 'rpx';
+    return style;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-time-axis-item {
+    @include vue-flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+}
+
+.u-time-axis-node {
+    position: absolute;
+    top: 12rpx;
+    left: -40rpx;
+    transform-origin: 0;
+    transform: translateX(-50%);
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    font-size: 24rpx;
+}
+
+.u-dot {
+    height: 16rpx;
+    width: 16rpx;
+    border-radius: 100rpx;
+    background: var(--u-divider-color);
+}
+</style>