vue手写横向时序图

Vue 手写横向时序图通常是指在 Vue.js 开发环境中，利用 Vue 的组件化和数据绑定特性来创建动态展示程序状态变化过程的图表。这种图表常见于描述前后端交互、用户操作流程或者系统事件流。

以下是手动创建一个简单横向时序图的基本步骤：

1. **创建组件**:
首先，你可以创建一个名为 `TimelineItem.vue` 的自定义组件，用于表示每个时间点和对应的状态变更。它可能包含属性如 `timestamp`, `state`, 和 `description`。

<template>
  <div :style="{ left: timestamp * 100 + '%' }">
    <span>{{ timestamp }}:</span> {{ state }}
    <span v-if="description">{{ description }}</span>
  </div>
</template>

<script>
export default {
  props: ['timestamp', 'state', 'description'],
}
</script>

2. **数组数据结构**:
在主应用组件中，维护一个表示时序的数据数组，每个对象都包含了时间戳、状态以及可能的描述信息。

data() {
  return {
    timelineData: [
      { timestamp: 0, state: '初始状态', description: '页面加载完成' },
      { timestamp: 500, state: '点击按钮', description: '触发函数A' },
      // 更多状态...
    ],
  };
},

3. **渲染组件列表**:
利用 Vue 的 `v-for` 指令遍历数组，并将每个对象作为组件实例的props传递给 `TimelineItem` 组件。

<template>
  <div class="timeline">
    <TimelineItem
      v-for="(item, index) in timelineData"
      :key="index"
      :timestamp="item.timestamp"
      :state="item.state"
      :description="item.description"
    />
  </div>
</template>

4. **样式调整**:
添加 CSS 样式，比如 `.timeline` 类来设置水平布局和动画效果，让每个组件在相应的时间点上平移显示。

通过以上步骤，你就创建了一个简单的 Vue 横向时序图。当然，如果需要更复杂的交互和动画，可以结合 Vue 的生命周期钩子和第三方库（如 animate.css 或者 Vue 动画插件）来增强体验。