当前位置：首页 > article >正文

Vue.js组件开发-实现全屏手风琴幻灯片切换特效

article 2025/2/5 14:14:02

使用 Vue 实现全屏手风琴幻灯片切换特效

步骤概述

创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。
设计组件结构：创建一个手风琴幻灯片组件，包含幻灯片项和切换逻辑。
实现样式：使用 CSS 实现全屏和手风琴效果。
添加交互逻辑：通过 Vue 的事件处理实现幻灯片的切换。

详细代码

1. 创建 Vue 项目

安装 Vue CLI，使用以下命令进行安装：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create accordion-slideshow
cd accordion-slideshow

2. 编写手风琴幻灯片组件

在 src/components 目录下创建 AccordionSlideshow.vue 文件，代码如下：

<template>
  <!-- 手风琴幻灯片容器 -->
  <div class="accordion-slideshow">
    <!-- 循环渲染每个幻灯片项 -->
    <div
      v-for="(slide, index) in slides"
      :key="index"
      class="accordion-slide"
      :class="{ active: activeIndex === index }"
      @click="toggleSlide(index)"
    >
      <!-- 幻灯片内容 -->
      <div class="slide-content">
        <h2>{{ slide.title }}</h2>
        <p>{{ slide.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccordionSlideshow',
  data() {
    return {
      // 幻灯片数据
      slides: [
        {
          title: 'Slide 1',
          description: 'This is the first slide.'
        },
        {
          title: 'Slide 2',
          description: 'This is the second slide.'
        },
        {
          title: 'Slide 3',
          description: 'This is the third slide.'
        }
      ],
      // 当前激活的幻灯片索引
      activeIndex: 0
    };
  },
  methods: {
    // 切换幻灯片的方法
    toggleSlide(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style scoped>
/* 手风琴幻灯片容器样式 */
.accordion-slideshow {
  display: flex;
  height: 100vh; /* 全屏高度 */
  overflow: hidden;
}

/* 幻灯片项样式 */
.accordion-slide {
  flex: 1; /* 初始平均分配宽度 */
  position: relative;
  background-color: #333;
  color: white;
  transition: flex 0.5s ease; /* 过渡动画 */
  cursor: pointer;
}

/* 激活的幻灯片项样式 */
.accordion-slide.active {
  flex: 3; /* 激活时占据更多宽度 */
}

/* 幻灯片内容样式 */
.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0; /* 初始隐藏内容 */
  transition: opacity 0.3s ease;
}

/* 激活的幻灯片内容样式 */
.accordion-slide.active .slide-content {
  opacity: 1; /* 显示内容 */
}
</style>

3. 在 `App.vue` 中使用组件

打开 src/App.vue 文件，将其内容替换为以下代码：

<template>
  <div id="app">
    <!-- 使用手风琴幻灯片组件 -->
    <AccordionSlideshow />
  </div>
</template>

<script>
// 引入手风琴幻灯片组件
import AccordionSlideshow from './components/AccordionSlideshow.vue';

export default {
  name: 'App',
  components: {
    AccordionSlideshow
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
}
</style>

代码注释说明

模板部分：
- v-for 指令用于循环渲染每个幻灯片项。
- :class 绑定用于根据 activeIndex 动态添加 active 类。
- @click 事件绑定用于触发 toggleSlide 方法。
脚本部分：
- data 函数返回组件的数据，包括幻灯片数据和当前激活的幻灯片索引。
- toggleSlide 方法用于切换激活的幻灯片。
样式部分：
- flex 属性用于控制幻灯片项的宽度。
- transition 属性用于实现过渡动画。
- opacity 属性用于控制幻灯片内容的显示和隐藏。