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

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

步骤概述

1. 创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。
2. 设计组件结构：创建一个手风琴幻灯片组件，包含幻灯片项和切换逻辑。
3. 实现样式：使用 CSS 实现全屏和手风琴效果。
4. 添加交互逻辑：通过 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 属性用于控制幻灯片内容的显示和隐藏。

使用说明

1. 已安装了 Node.js 和 npm。
2. 在项目根目录下运行以下命令启动开发服务器：

npm run serve

3. 打开浏览器，访问 http://localhost:8080，可看到全屏手风琴幻灯片效果。
4. 点击每个幻灯片项，它将展开并显示内容，其他幻灯片项将收缩。