基于Vue.js实现简洁的多屏切换效果

vue create screen-switcher
cd screen-switcher
npm run serve

<div class="screens">
  <div class="screen left-screen">
    <h1>左屏</h1>
  </div>
  <div class="screen center-screen">
    <h1>中屏</h1>
  </div>
  <div class="screen right-screen">
    <h1>右屏</h1>
  </div>
</div>

.screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
}

export default {
  data() {
    return {
      currentScreen: 1, // 当前显示的屏幕索引，默认为中屏
    };
  },
  methods: {
    switchScreen(screenIndex) {
      this.currentScreen = screenIndex; // 切换到指定屏幕
    },
  },
};

<div class="screens" :style="{ transform: `translateX(-${currentScreen * 100}vw)` }"></div>

<div class="controls" @mouseover="showButtons = true" @mouseleave="showButtons = false">
  <transition name="fade">
    <div v-if="showButtons" class="button-wrapper">
      <button @click="switchScreen(0)">左屏</button>
      <button @click="switchScreen(1)">中屏</button>
      <button @click="switchScreen(2)">右屏</button>
    </div>
  </transition>
</div>

<template>
  <div class="container">
    <!-- 三屏显示区域 -->
    <div class="screens" :style="{ transform: `translateX(-${currentScreen * 100}vw)` }">
      <div class="screen left-screen">
        <h1>左屏</h1>
      </div>
      <div class="screen center-screen">
        <h1>中屏</h1>
      </div>
      <div class="screen right-screen">
        <h1>右屏</h1>
      </div>
    </div>

    <!-- 控制按钮显示区域，当鼠标悬停时显示按钮 -->
    <div
        class="controls"
        @mouseover="showButtons = true"
        @mouseleave="showButtons = false"
    >
    <transition name="fade"> <!-- 使用Vue的过渡效果 -->
      <div v-if="showButtons" class="button-wrapper">
        <!-- 切换到左屏 -->
        <button @click="switchScreen(0)">左屏</button>
        <!-- 切换到中屏 -->
        <button @click="switchScreen(1)">中屏</button>
        <!-- 切换到右屏 -->
        <button @click="switchScreen(2)">右屏</button>
      </div>
    </transition>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentScreen: 1, // 当前显示的屏幕索引，默认显示中屏
      showButtons: false, // 控制按钮的显示与隐藏，初始为隐藏状态
    };
  },
  methods: {
    // 切换屏幕的函数，接收屏幕索引作为参数
    switchScreen(screenIndex) {
      this.currentScreen = screenIndex; // 更新当前屏幕为点击的屏幕
    },
  },
};
</script>

<style scoped>
/* 设置页面和容器的基础样式，确保页面无滚动条 */
html, body {
  height: 100%;  /* 页面高度占满视口 */
  margin: 0;  /* 去除默认的页面外边距 */
  overflow: hidden;  /* 禁止页面滚动 */
}

.container {
  width: 100vw;  /* 容器宽度为整个视口宽度 */
  height: 100vh;  /* 容器高度为整个视口高度 */
  overflow: hidden;  /* 禁止滚动条 */
  position: relative;  /* 设置相对定位，为了让控制区域绝对定位在底部 */
}

/* 三个屏幕的布局样式 */
.screens {
  display: flex;  /* 使用flex布局，使屏幕在水平方向排列 */
  width: 300vw;  /* 容器宽度为三个屏幕的总宽度 */
  height: 100%;  /* 高度占满整个父容器 */
  transition: transform 0.5s ease-in-out;  /* 添加屏幕切换时的平滑过渡动画 */
}

/* 单个屏幕的样式 */
.screen {
  width: 100vw;  /* 每个屏幕宽度为视口宽度 */
  height: 100vh;  /* 每个屏幕高度为视口高度 */
  display: flex;  /* flex布局，方便内容居中显示 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: 3em;  /* 设置屏幕标题的字体大小 */
}

/* 各个屏幕的背景色 */
.left-screen {
  background-color: #ffcccc;  /* 左屏为淡红色 */
}

.center-screen {
  background-color: #ccffcc;  /* 中屏为淡绿色 */
}

.right-screen {
  background-color: #ccccff;  /* 右屏为淡紫色 */
}

/* 控制区域的样式 */
.controls {
  position: absolute;  /* 绝对定位，确保控制区域固定在底部 */
  bottom: 20px;  /* 离底部20px */
  left: 50%;  /* 居中对齐 */
  transform: translateX(-50%);  /* 通过transform将其完全居中 */
  display: flex;  /* 使用flex布局 */
  justify-content: center;  /* 按钮在容器内居中 */
  width: 100%;  /* 控制区域宽度为父容器的100% */
  height: 100px;  /* 高度为100px */
}

/* 按钮容器的样式，优化按钮区域外观 */
.button-wrapper {
  display: flex;  /* flex布局，方便按钮水平排列 */
  justify-content: center;  /* 按钮居中排列 */
  background-color: rgba(255, 255, 255, 0.8);  /* 半透明的背景色 */
  padding: 15px 30px;  /* 设置内边距 */
  border-radius: 25px;  /* 圆角效果 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);  /* 添加柔和的阴影效果 */
  transition: all 0.3s ease;  /* 设置容器过渡效果 */
}

/* 按钮的样式 */
.button-wrapper button {
  padding: 15px 25px;  /* 内边距，确保按钮大小适中 */
  margin: 0 15px;  /* 按钮之间的间距 */
  font-size: 1.2em;  /* 按钮文字大小 */
  font-weight: bold;  /* 按钮文字加粗 */
  cursor: pointer;  /* 鼠标悬停时显示为指针 */
  background: linear-gradient(135deg, #6dd5ed, #2193b0);  /* 按钮的渐变背景色 */
  color: #fff;  /* 按钮文字为白色 */
  border: none;  /* 无边框 */
  border-radius: 15px;  /* 圆角按钮 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  /* 按钮阴影效果 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;  /* 添加按钮的过渡效果 */
}

/* 鼠标悬停时按钮的效果 */
.button-wrapper button:hover {
  background: linear-gradient(135deg, #2193b0, #6dd5ed);  /* 背景色反转 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);  /* 阴影加深 */
  transform: translateY(-5px);  /* 按钮有轻微升起效果 */
}

/* 过渡动画样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;  /* 控制透明度的过渡效果 */
}
.fade-enter, .fade-leave-to {
  opacity: 0;  /* 进入时透明度从0开始，离开时透明度为0 */
}
</style>