tnuiv3p-tn-time-line v1.0.5

图鸟 UI vue3 uniapp Plugins - 时间轴

Tuniao UI vue3官方仓库

该组件用于展示与时间相关的信息，如日志、签到记录等。

安装

npm install tnuiv3p-tn-time-line

组件位置

tnuiv3p-tn-timeline/time-line.vue
tnuiv3p-tn-timeline/time-line-item.vue
tnuiv3p-tn-timeline/time-line-data.vue

平台差异说明

基础使用

在TnTimeLineData组件中自定义当前事件节点的内容，节点的内容放在默认的插槽中

使用TnTimeLineItem包裹TnTimeLineData组件，该组件可以设置大节点的标题信息，也可以通过slot="title"插槽自定义标题内容

使用TnTimeLine包裹着全部TnTimeLineItem节点

<script setup lang="ts">
import TnTimeLine from 'tnuiv3p-tn-time-line/time-line.vue'
import TnTimeLineItem from 'tnuiv3p-tn-time-line/time-line-item.vue'
import TnTimeLineData from 'tnuiv3p-tn-time-line/time-line-data.vue'

interface TimeLineDataItem {
  date?: string
  version?: string
  content: string
}

interface TimeLineData {
  month: string
  icon?: string
  data: TimeLineDataItem[]
}

// 时间轴数据
const timeLineData: TimeLineData[] = [
  {
    month: '2023-07',
    icon: 'moments',
    data: [
      {
        date: '1',
        version: '1.0.0',
        content:
          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
      },
      {
        content:
          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
      },
    ],
  },
  {
    month: '2023-08',
    icon: 'creative',
    data: [
      {
        content:
          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
      },
      {
        date: '2',
        version: '1.0.0',
        content:
          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
      },
    ],
  },
]
</script>

<template>
  <view class="content">
    <TnTimeLine>
      <TnTimeLineItem
        v-for="(item, index) in timeLineData"
        :key="index"
        :title="item.month"
        :title-icon="item.icon !== undefined ? item.icon : ''"
      >
        <TnTimeLineData
          v-for="(dataItem, dataIndex) in item.data"
          :key="dataIndex"
        >
          <view
            v-if="dataItem?.date"
            class="time-line__title tn-flex justify-between items-center tn-gray-dark_text"
          >
            <view class="date">{{ dataItem?.date || '' }}</view>
            <view class="version">{{ dataItem?.version || '' }}</view>
          </view>
          <view class="time-line__data">
            {{ dataItem.content }}
          </view>
        </TnTimeLineData>
      </TnTimeLineItem>
    </TnTimeLine>
  </view>
</template>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  padding: 30rpx;

  .time-line {
    &__title {
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>

API

TnTimeLine Props

TnTimeLine Slots

TnTimeLineItem Props

TnTimeLineItem Emits

TnTimeLineItem Slots

TnTimeLineData Props

TnTimeLineItem Emits

TnTimeLineItem Slots