vue实现ppt播放

Vue实现PPT播放的基本方法

使用Vue实现PPT播放功能可以结合现有库或自定义组件完成。以下是两种常见实现方式：

使用第三方库（如reveal.js）

安装reveal.js库：

npm install reveal.js

在Vue组件中引入并初始化：

<template>
  <div class="reveal">
    <div class="slides">
      <section>第一页内容</section>
      <section>第二页内容</section>
    </div>
  </div>
</template>

<script>
import Reveal from 'reveal.js'
import 'reveal.js/dist/reveal.css'
import 'reveal.js/dist/theme/white.css'

export default {
  mounted() {
    Reveal.initialize()
  }
}
</script>

自定义PPT组件实现

创建基础幻灯片组件：

<template>
  <div class="ppt-container">
    <div 
      class="slide" 
      v-for="(slide, index) in slides" 
      :key="index"
      :class="{ active: currentSlide === index }"
    >
      {{ slide.content }}
    </div>
    <button @click="prevSlide">上一页</button>
    <button @click="nextSlide">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      slides: [
        { content: '第一页内容' },
        { content: '第二页内容' }
      ]
    }
  },
  methods: {
    prevSlide() {
      if (this.currentSlide > 0) {
        this.currentSlide--
      }
    },
    nextSlide() {
      if (this.currentSlide < this.slides.length - 1) {
        this.currentSlide++
      }
    }
  }
}
</script>

<style>
.slide {
  display: none;
}
.slide.active {
  display: block;
}
</style>

添加过渡动画效果

使用Vue的transition组件实现页面切换动画：

<transition name="slide-fade">
  <div 
    class="slide" 
    v-show="currentSlide === index"
    v-for="(slide, index) in slides" 
    :key="index"
  >
    {{ slide.content }}
  </div>
</transition>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

支持键盘导航

添加键盘事件监听实现左右箭头翻页：

mounted() {
  window.addEventListener('keydown', this.handleKeyDown)
},
beforeDestroy() {
  window.removeEventListener('keydown', this.handleKeyDown)
},
methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowLeft') {
      this.prevSlide()
    } else if (e.key === 'ArrowRight') {
      this.nextSlide()
    }
  }
}

添加进度指示器

在模板中添加进度条显示：

<div class="progress-bar">
  <div 
    class="progress" 
    :style="{ width: progress + '%' }"
  ></div>
</div>

<script>
computed: {
  progress() {
    return ((this.currentSlide + 1) / this.slides.length) * 100
  }
}
</script>

<style>
.progress-bar {
  height: 5px;
  background: #ddd;
}
.progress {
  height: 100%;
  background: #42b983;
  transition: width 0.3s;
}
</style>

这些方法提供了从简单到进阶的Vue PPT实现方案，可根据项目需求选择合适的实现方式。