<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来替换具体的图标组件。