Vue3时间轴（TimeLine/分页和播放暂停功能）

<template>
  <div class="timeline">
    <div
      v-for="(item, index) in items"
      :key="item.id"
      class="timeline-item"
      :class="{'active': index === activeIndex}"
      @click="play(index)"
    >
      <!-- 播放按钮 -->
      <button v-if="index === activeIndex" @click.stop="pause">
        <!-- 使用内联SVG或图标库中的播放/暂停图标 -->
        <PauseIcon v-if="isPlaying" />
        <PlayIcon v-else />
      </button>
      <!-- 时间轴内容 -->
      <div class="timeline-content">
        <!-- 你的内容 -->
      </div>
    </div>
    <!-- 分页按钮 -->
    <button @click="goToPage(activeIndex - 1)" :disabled="activeIndex <= 0">
      <!-- 使用内联SVG或图标库中的左箭头图标 -->
      <LeftArrowIcon />
    </button>
    <button @click="goToPage(activeIndex + 1)" :disabled="activeIndex >= items.length - 1">
      <!-- 使用内联SVG或图标库中的右箭头图标 -->
      <RightArrowIcon />
    </button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { PlayIcon, PauseIcon, LeftArrowIcon, RightArrowIcon } from './icons';
 
export default {
  components: {
    PlayIcon,
    PauseIcon,
    LeftArrowIcon,
    RightArrowIcon
  },
  setup() {
    const items = ref([/* 你的数据数组 */]);
    const activeIndex = ref(0);
    const isPlaying = ref(false);
 
    const play = (index) => {
      activeIndex.value = index;
      isPlaying.value = true;
    };
 
    const pause = () => {
      isPlaying.value = false;
    };
 
    const goToPage = (index) => {
      if (index >= 0 && index < items.value.length) {
        activeIndex.value = index;
      }
    };
 
    return { items, activeIndex, isPlaying, play, pause, goToPage };
  }
};
</script>
 
<style scoped>
.timeline {
  /* 样式 */
}
.timeline-item {
  /* 样式 */
}
.active {
  /* 激活状态的样式 */
}
.timeline-content {
  /* 时间轴内容的样式 */
}
</style>

这个简化版的代码实例展示了如何在Vue 3中创建一个基本的时间轴组件，该组件包括播放、暂停和分页功能。这里使用了ref来定义响应式数据，并通过setup函数提供了组件的逻辑。图标部分可以使用内联SVG或者图标库如Font Awesome来替换具体的图标组件。