wk-view

Appearance

On this page

wkv-timeline ​

时间轴，一般用于各种跟时间相关的记录场景。

用法 ​

html
<wkv-timeline>
	<wkv-timeline-item
		v-for="(item, index) in dataList"
		:key="index"
		:title="item.title"
		:message="item.message"
		:datetime="item.datetime"
		:important="item.important"
		:active="index === 0"
	/>
</wkv-timeline>

wkv-timeline Slots ​

插槽名插槽说明
default默认插槽，渲染 wkv-timeline-item 集合

wkv-timeline-item Props ​

属性名类型默认值说明
titleString-标题
messageString-内容
datetimeString-时间
nodeTopNumber10节点标记的顶部偏移距离
importantBooleanfalse是否重要节点
activeBooleanfalse是否当前节点

wkv-timeline-item Slots ​

插槽名插槽说明参数说明
node自定义节点标记-
content自定义节点内容-

示例 ​

vue
<template>
	<view class="wkv-timeline-example">
		<wkv-tabs :tabs="['默认样式', '自定义样式']" v-model:active-index="currentTab" />
		<!-- 默认样式 -->
		<wkv-timeline v-if="currentTab === 0">
			<wkv-timeline-item
				v-for="(item, index) in dataList"
				:key="index"
				:title="item.title"
				:message="item.message"
				:datetime="item.datetime"
				:important="item.important"
				:active="index === 0"
			/>
		</wkv-timeline>
		<!-- 自定义样式 -->
		<wkv-timeline v-if="currentTab === 1">
			<wkv-timeline-item v-for="(item, index) in dataList" :key="index">
				<template #node>
					<view :style="{ fontSize: `${item.important ? 20 : 12}px` }">❁</view>
				</template>
				<template #content>
					<view>
						<text v-if="item.title" class="timeline-custom-title">{{ item.title }}</text>
						<text class="timeline-custom-datetime">{{ item.datetime }}</text>
					</view>
					<view class="timeline-custom-message">{{ item.message }}</view>
				</template>
			</wkv-timeline-item>
		</wkv-timeline>
	</view>
</template>
vue
<script setup lang="ts">
import { ref } from 'vue'

const currentTab = ref(0)

const dataList = [
	{
		title: '派送中',
		message: '您的快递正在派送',
		datetime: '2023年11月16日18:32:36',
		important: true,
	},
	{
		title: '运输中',
		message: '快递已到达广东省广州市',
		datetime: '2023年11月16日12:10:24',
		important: true,
	},
	{
		title: '',
		message: '快递已到达广东省佛山市',
		datetime: '2023年11月15日05:14:33',
		important: false,
	},
	{
		title: '',
		message: '快递已到达四川省成都市',
		datetime: '2023年11月14日08:30:08',
		important: false,
	},
	{
		title: '已发货',
		message: '您购买的物品已发货',
		datetime: '2023年11月13日10:10:54',
		important: true,
	},
]
</script>
scss
<style lang="scss">
.wkv-timeline-example {
	padding: 20px;

	.timeline-custom-title {
		font-size: $wkv-font-size-lg;
	}

	.timeline-custom-datetime {
		font-size: $wkv-font-size-sm;
		color: $wkv-secondary-color;
	}

	.timeline-custom-title + .timeline-custom-datetime {
		margin-left: 10px;
	}

	.timeline-custom-message {
		font-size: $wkv-font-size-base;
		color: $wkv-base-color;
	}
}
</style>