五、点击切换、滚动切换、键盘切换

news2024/12/25 1:16:18

简介

通过事件改变当前展示的信息组件，交互的事件有点击上下切换、鼠标轮动上下切换、键盘上下键切换。欢迎访问个人的简历网站预览效果

本章涉及修改与新增的文件：App.vue、public
在这里插入图片描述

一、鼠标点击上下箭头切换

<template>
  <div class="app-background">
    <!-- 上一页信息 -->
    <div class="absolute" @click="prev" style="top: 50px;">
      <img src="/up.svg" class="logo" alt="Email" /> // 图片可以在iconfont上获取，选择svg格式
    </div>

    <el-carousel ref="carousel" height="100vh" direction="vertical" :autoplay="false">
      <el-carousel-item>
        <first />
      </el-carousel-item>
      <el-carousel-item>
        <second />
      </el-carousel-item>
      <el-carousel-item>
        <third />
      </el-carousel-item>
      <el-carousel-item>
        <fourth />
      </el-carousel-item>
      <el-carousel-item>
        <fifth @showProject="showProject" />
      </el-carousel-item>
    </el-carousel>
    <!-- 下一页信息 -->
    <div class="absolute" @click="next" style="bottom: 50px;">
      <img src="/down.svg" class="logo" alt="Email" /> // 图片可以在iconfont上获取，选择svg格式
    </div>
    <!-- 项目经验详情 -->
    <el-dialog v-model="showDialog" center>
      <div class="family">
        <div class="text18" style="text-align: center;font-weight: bold;">{{ projectInfo.projectName }}</div>
        <div class="margin-top" style="text-align: center;">
          {{ projectInfo.projectStartTime }} - {{ projectInfo.projectEndTime }}
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">项目描述：</div>
          <div>{{ projectInfo.projectDescription }}</div>
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">项目职责：</div>
          <div>{{ projectInfo.projectDuty }}</div>
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">技术栈：</div>
          <div>{{ projectInfo.projectStack }}</div>
        </div>
        <div class="flex margin-top" v-if="projectInfo.projectOnline">
          <div style="min-width: 100px;">线上地址：</div>
          <el-link :href="projectInfo.projectOnline" target="_blank">
            {{ projectInfo.projectOnline }}
          </el-link>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import first from './components/First.vue'
import second from './components/Second.vue'
import third from './components/Third.vue'
import fourth from './components/Fourth.vue'
import fifth from './components/Fifth.vue'
import project from './utils/Project.ts' // 引入数据
import { ref } from 'vue'
const showDialog = ref(false)
const projectInfo = ref(project['center'])

const carousel = ref()
// 获取默认项目经验数据
const showProject = (value: any) => {
  if (project[value]) {
    projectInfo.value = project[value]
    showDialog.value = true
  }
}

// 上一页
const prev = () => {
  carousel.value.prev()
}

// 下一页
const next = () => {
  carousel.value.next()
}
</script>

<style scoped>
.app-background {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('./assets/bgBig.png');
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}

.el-carousel__item {
  min-height: 100vh;
  background-color: rgba(10, 10, 10, 0.3);
}

::v-deep(.el-dialog) {
  background-color: rgb(250, 235, 215);
  animation: jackInTheBox;
  animation-duration: 1.5s;
}

.absolute {
  position: absolute;
  z-index: 10;
  left: calc(50% - 14px);
  opacity: .25;
  transition: all .4s linear 0s;
}

.absolute:hover {
  transform: scale(1.18);
  opacity: .85;
}

.logo {
  width: 28px;
  height: 28px;
}
</style>

二、鼠标滚轮上下滚动切换

<template>
    // 添加 handleWheel 滚动事件
  <div class="app-background" @wheel="handleWheel">
    ...
  </div>
</template>
<script setup lang="ts">
import first from './components/First.vue'
import second from './components/Second.vue'
import third from './components/Third.vue'
import fourth from './components/Fourth.vue'
import fifth from './components/Fifth.vue'
import project from './utils/Project.ts' // 引入数据
import { ref } from 'vue'
const showDialog = ref(false)
const projectInfo = ref(project['center'])

const carousel = ref()
// 获取默认项目经验数据
const showProject = (value: any) => {
  if (project[value]) {
    projectInfo.value = project[value]
    showDialog.value = true
  }
}

// 上一页
const prev = () => {
  carousel.value.prev()
}

// 下一页
const next = () => {
  carousel.value.next()
}

// 鼠标滚轮 滚动事件 防抖
let timer: any = null
const handleWheel = (e: any) => {
  if (showDialog.value) return
  let lock: Boolean = !timer;
  if (lock) {
    if (e.deltaY > 0) {
      next()
    } else if (e.deltaY < 0) {
      prev()
    }
    timer = setTimeout(() => {
      timer = null;
    }, 500); // 防抖
  }
}
</script>
<style scoped>
 ... 
</style>

三、键盘上下键切换

...
<script setup lang="ts">
...
let timer: any = null
const handleWheel = (e: any) => {
  if (showDialog.value) return
  let lock: Boolean = !timer;
  if (lock) {
    if (e.deltaY > 0) {
      next()
    } else if (e.deltaY < 0) {
      prev()
    }
    timer = setTimeout(() => {
      timer = null;
    }, 800);
  }
}

// 触发时回调事件 防抖
const handleKeyDown = (event: any) => {
  if (showDialog.value) return
  let lock: Boolean = !timer;
  if (lock) {
    if (event.key === 'ArrowUp') { prev() }
    else if (event.key === 'ArrowDown') { next() }
    timer = setTimeout(() => {
      timer = null;
    }, 800);
  }
}

// 监听键盘触发事件
document.addEventListener('keydown', handleKeyDown);
</script>
...