Vue中导航项目的可滚动下拉菜单

<template>
  <div class="dropdown">
    <button class="dropdown-toggle" @click="toggleDropdown">
      导航菜单
    </button>
    <ul class="dropdown-menu" v-show="isOpen">
      <li v-for="item in menuItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      menuItems: [
        { id: 1, name: '菜单项1' },
        { id: 2, name: '菜单项2' },
        { id: 3, name: '菜单项3' },
        // 更多菜单项...
      ]
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style>
.dropdown {
  position: relative;
}

.dropdown-toggle {
  /* 导航菜单样式 */
}

.dropdown-menu {
  /* 下拉菜单样式 */
  max-height: 200px;
  overflow-y: auto;
}
</style>