xtf-timeline

组件说明

xtf-timeline 是按时间顺序展示事件的组件，适用于物流、审批和操作记录。支持水平或垂直方向、交替布局、待加载节点及加载更多事件。

基础用法

1. 基础时间线

<template><xtf-timeline :items="items" /></template>
<script>
export default {
  data() {
    return {
      items: [
        { time: '09:20', title: '订单创建', desc: '等待支付' },
        { time: '10:00', title: '支付成功' }
      ]
    }
  }
}
</script>

2. 样式和布局

<template>
  <xtf-timeline :items="items" direction="horizontal" mode="alternate" line-style="gradient" />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { title: '创建', color: '#2563eb' },
        { title: '审核', type: 'icon', icon: 'check', theme: 'success', tag: '完成' }
      ]
    }
  }
}
</script>

3. 待加载与加载更多

<template>
  <xtf-timeline
    :items="items"
    pending
    pending-text="正在加载最新记录"
    load-more
    @load-more="more"
  />
</template>
<script>
export default {
  data() {
    return { items: [{ id: 1, title: '已签收', time: '今天 12:30' }] }
  },
  methods: {
    more() {
      this.items.push({ id: 2, title: '运输中', time: '昨天 18:00' })
      console.log('加载更多')
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | items | Array | [] | 时间线数据 | 记录列表 | | direction | String | 'vertical' | vertical/horizontal | 布局方向 | | mode | String | 'left' | left/right/alternate | 垂直布局 | | alternate | Boolean | false | 强制交替模式，优先于 mode | 双侧记录 | | lineStyle | String | 'solid' | solid/dashed/gradient | 连线样式 | | loadMore | Boolean | false | 显示加载更多入口 | 分页记录 | | pending | Boolean | false | 末尾追加加载节点 | 请求中 | | pendingText | String | '' | 待加载标题 | 自定义文案 | | reverse | Boolean | false | 反转展示顺序 | 最新优先 | | loadMoreText | String | '' | 加载更多文案 | 自定义文案 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

items 每项支持的字段

字段	类型	默认值	说明
id/title/desc/time	String | Number	''	唯一键、标题、说明、时间
type	String	'default'	default/hollow/icon
icon/color	String	''/主题主色	图标节点和节点颜色
tag/theme	String	''	标签文字和标签主题

---

事件

事件名称	触发时机	回调参数	参数说明
load-more	点击底部入口	()	请求下一页数据

---

插槽

插槽名	作用	作用域参数	说明
无	-	-	组件未提供插槽

主题说明

• 节点使用 --xtf-timeline-node-color、--xtf-timeline-node-text。
• 渐变连接线使用 --xtf-timeline-gradient-line-vertical 和 --xtf-timeline-gradient-line-horizontal。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。