EASYAIuniappNewUI/node_modules/tnuiv3p-tn-time-line

图鸟 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

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

在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

属性名	说明	类型	默认值	可选值
show-line	显示竖线	Boolean	true	false

TnTimeLine Slots

插槽名	说明	子标签
default	时间节点	TnTimeLineItem

TnTimeLineItem Props

属性名	说明	类型	默认值	可选值
title	标题	String	-	-
title-icon	标题icon	String	-	图标有效值
dot-bg-color	左边小点背景，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
dot-text-color	左边小点字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-

TnTimeLineItem Emits

事件名	说明	类型
click	item点击事件	() => void

TnTimeLineItem Slots

插槽名	说明	子标签
default	时间节点数据	TnTimeLineData
title	自定义标题数据	-

TnTimeLineData Props

属性名	说明	类型	默认值	可选值
dot-icon	节点图标	String	circle-fill	图标有效值
dot-color	左边节点点颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-

TnTimeLineItem Emits

事件名	说明	类型
click	itemData点击事件	() => void

TnTimeLineItem Slots

插槽名	说明
default	时间节点数据内容