【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 状态的节点会有光晕效果
  • 最后一个节点不显示连接线
相关推荐
碎_浪11 小时前
给键盘党的英语记忆工具:我做了一款「打字背单词」桌面应用
前端·程序员·ai编程
阿成学长_Cain12 小时前
Linux dirs命令详解|Bash目录堆栈管理快速切换目录实战教程
linux·运维·前端·数据库
多加点辣也没关系12 小时前
JavaScript|第4章:类型转换
开发语言·javascript
yqcoder13 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
IT_陈寒13 小时前
Java的Stream.parallel()把我CPU跑爆了,这种优化要谨慎
前端·人工智能·后端
小皮虾13 小时前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
烬羽13 小时前
还在手动拼路径、写回调地狱?一文吃透 Node.js 的 path 和 fs
javascript·程序员·node.js
山河木马13 小时前
GPU自动处理专题1-裁剪到底在裁什么(裁剪)
前端·webgl·计算机图形学
奔跑的蜗牛ing13 小时前
CentOS Nginx 安装与静态文件服务器配置指南
前端·面试·架构