使用vue实现电梯导航

好的，以下是使用 Vue 实现电梯导航的基本步骤：

1. 在 Vue 组件中定义电梯导航的数据模型，包括导航的楼层数、当前所在楼层等信息。
2. 在模板中使用 v-for 指令和数据模型来动态生成楼层导航按钮。
3. 在组件中定义方法，用来处理点击导航按钮后的逻辑，如滚动到对应楼层、更新当前楼层等。
4. 在模板中绑定点击事件，将点击事件与对应的方法关联起来。
5. 使用 Vue 的计算属性来实现当前楼层的自动更新。

下面是一个基本的示例代码：

HTML 模板：

<template>
  <div>
    <div class="elevator">
      <div v-for="floor in floors" :key="floor" class="elevator-floor" :class="{ active: currentFloor === floor }" @click="goToFloor(floor)">
        {{ floor }}F
      </div>
    </div>
    <div class="building">
      <div v-for="floor in floors" :key="floor" class="floor" :class="{ active: currentFloor === floor }">
        <h2>{{ floor }}F</h2>
        <!-- 每层楼的内容 -->
      </div>
    </div>
  </div>
</template>

JavaScript 代码：

<script>
export default {
  data() {
    return {
      floors: [1, 2, 3, 4, 5], // 楼层数组
      currentFloor: 1 // 当前所在楼层，默认为1
    };
  },
  methods: {
    goToFloor(floor) {
      // 滚动到对应楼层
      this.currentFloor = floor; // 更新当前楼层
    }
  },
  computed: {
    activeFloor() {
      return this.currentFloor; // 返回当前楼层
    }
  }
};
</script>

CSS 样式：

<style>
.elevator {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elevator-floor {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: 10px;
}

.elevator-floor.active {
  background-color: #ccc;
}

.building {
  margin-left: 80px;
}

.floor {
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.floor.active {
  background-color: #ccc;
}
</style>

以上代码实现了一个简单的电梯导航，点击楼层按钮可以滚动到对应的楼层，同时更新当前楼层的状态。