【Timeline】

已创建时间轴组件!

组件路径:

  • components/Timeline/Timeline.vue
  • components/Timeline/TimelineItem.vue

使用示例:

vue 复制代码
<template>
  <view>
    <Timeline>
      <TimelineItem 
        time="2024-01-15 10:30" 
        title="工单创建"
        content="客户提交了消杀服务申请"
      />
      <TimelineItem 
        time="2024-01-15 11:00" 
        title="工单分派"
        content="已分派给外勤人员张三"
        active
      />
      <TimelineItem 
        time="2024-01-15 14:00" 
        title="到达现场"
        content="外勤人员已到达客户现场"
        icon="map"
      />
      <TimelineItem 
        time="2024-01-15 14:30" 
        title="服务完成"
        content="消杀服务已完成,等待客户确认"
        color="#4CAF50"
      />
    </Timeline>
  </view>
</template>

<script>
import Timeline from '@/components/Timeline/Timeline.vue'
import TimelineItem from '@/components/Timeline/TimelineItem.vue'

export default {
  components: { Timeline, TimelineItem }
}
</script>

TimelineItem Props:

属性 类型 默认值 说明
time String '' 时间
title String '' 标题
content String '' 内容描述
icon String '' 图标名称(uni-icons)
color String '#1E88E5' 节点颜色
active Boolean false 是否为当前激活状态

设计特点:

  • 使用项目统一的蓝色主题(#1E88E5)
  • 时间轴节点支持自定义颜色和图标
  • active 状态的节点会有光晕效果
  • 最后一个节点不显示连接线
相关推荐
web打印社区30 分钟前
Vue3 发票静默打印,我这边能跑通的一版
前端·javascript·vue.js·chrome·electron
嘟哩DuliDuli44 分钟前
创作 Agent 的任务状态该如何保存
android·java·javascript
lemon_sjdk1 小时前
JavaScript 常用关键字全解析
开发语言·javascript·ecmascript
妖孽白小白2 小时前
el-select的内容续写实现
前端·vue.js·elementui
不可能片场2 小时前
Electron 主进程热补丁:单行 JS 安全打法
前端·electron
梨想橙汁2 小时前
Pinia 状态管理实战:定义 Store、修改数据、模块拆分
前端·vue.js
高申航2 小时前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端·javascript·vue.js
梨想橙汁2 小时前
Vue3 组件开发:生命周期钩子,组件之间通信全方案
前端·vue.js
雪芽蓝域zzs2 小时前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js
恋猫de小郭2 小时前
iPhone Duo 适配详解,需要改变的不止是布局模型
前端·flutter·ios