用vue实现电梯导航

好的，下面是用 Vue 实现电梯导航的步骤：

1. 在 Vue 组件中，定义一个 data 属性，用来存储当前所在的楼层号。

2. 在 HTML 模板中，使用 v-for 指令循环生成电梯导航按钮，每个按钮对应一个楼层。

3. 给每个按钮绑定点击事件，点击时更新 data 属性中的楼层号。

4. 在 Vue 的 computed 属性中，定义一个计算属性，根据当前楼层号计算出电梯导航按钮的样式，用来标识当前所在的楼层。

5. 在 CSS 中，定义电梯导航按钮的样式和当前楼层的样式。

6. 在 Vue 组件的 mounted 钩子函数中，监听滚动事件，计算出当前所在的楼层号，并更新 data 属性中的值。

具体实现可以参考以下代码：

<template>
  <div class="elevator">
    <div class="button"
         v-for="floor in floors"
         :key="floor"
         :class="{ active: floor === currentFloor }"
         @click="goToFloor(floor)">
      {{ floor }}F
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFloor: 1, // 当前所在的楼层号
      floors: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // 总楼层数
    }
  },
  computed: {
    // 计算当前楼层按钮的样式
    buttonStyle() {
      return {
        active: floor === this.currentFloor
      }
    }
  },
  methods: {
    // 点击电梯导航按钮，跳转到对应楼层
    goToFloor(floor) {
      this.currentFloor = floor
      window.scrollTo({
        top: this.$refs[`floor${floor}`][0].offsetTop,
        behavior: 'smooth'
      })
    }
  },
  mounted() {
    // 监听滚动事件，计算当前所在的楼层号
    window.addEventListener('scroll', () => {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      for (let i = 1; i <= this.floors.length; i++) {
        let floorTop = this.$refs[`floor${i}`][0].offsetTop
        if (scrollTop >= floorTop - 100) {
          this.currentFloor = i
        }
      }
    })
  }
}
</script>

<style>
.elevator {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.button {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  margin-bottom: 10px;
  cursor: pointer;
}

.active {
  background-color: #f00;
  color: #fff;
}
</style>