vue实现ppt播放

Vue 实现 PPT 播放

使用第三方库

推荐使用 vue-ppt 或 reveal.js 这类专门为 Vue 设计的幻灯片库。安装后可直接通过组件形式实现幻灯片效果。

npm install vue-ppt --save

在 Vue 文件中引入并配置幻灯片内容：

<template>
  <vue-ppt :slides="slides" />
</template>

<script>
import VuePpt from 'vue-ppt';

export default {
  components: { VuePpt },
  data() {
    return {
      slides: [
        { title: 'Slide 1', content: 'Content for slide 1' },
        { title: 'Slide 2', content: 'Content for slide 2' },
      ]
    };
  }
};
</script>

自定义实现

通过 Vue 的动态组件和过渡效果，可以手动实现幻灯片切换功能。

<template>
  <div>
    <button @click="prevSlide">Previous</button>
    <button @click="nextSlide">Next</button>
    <transition name="slide-fade">
      <div :key="currentSlide">
        <h3>{{ slides[currentSlide].title }}</h3>
        <p>{{ slides[currentSlide].content }}</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      slides: [
        { title: 'Slide 1', content: 'Content for slide 1' },
        { title: 'Slide 2', content: 'Content for slide 2' },
      ]
    };
  },
  methods: {
    prevSlide() {
      this.currentSlide = Math.max(0, this.currentSlide - 1);
    },
    nextSlide() {
      this.currentSlide = Math.min(this.slides.length - 1, this.currentSlide + 1);
    }
  }
};
</script>

<style>
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: opacity 0.5s;
}
.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
}
</style>

集成 Fullscreen API

为增强用户体验，可以结合浏览器 Fullscreen API 实现全屏播放。

<template>
  <div ref="slideshow">
    <!-- 幻灯片内容 -->
    <button @click="toggleFullscreen">Fullscreen</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        this.$refs.slideshow.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    }
  }
};
</script>

键盘导航支持

监听键盘事件实现左右箭头切换幻灯片。

<script>
export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(e) {
      if (e.key === 'ArrowLeft') this.prevSlide();
      if (e.key === 'ArrowRight') this.nextSlide();
    }
  }
};
</script>

添加进度指示器

在底部显示当前幻灯片位置和总页数。

<template>
  <div class="progress">
    {{ currentSlide + 1 }} / {{ slides.length }}
  </div>
</template>