动态监听菜单长度，多余的菜单项自动添加到更多选项，用于下拉选择（原生）

项目需求：

动态监听菜单长度，多余的菜单项自动添加到更多选项，用于下拉选择。（问了chartgpt）

---

解决方案：

<template>
  <div class="menu">
    <div class="visible-menu">
      <div v-for="(menuItem, index) in visibleMenuItems" :key="index" @click="handleMenuItemClick(menuItem)">
        {{ menuItem }}
      </div>
    </div>
    <select v-model="selectedMenuItem" class="more-menu" v-show="moreMenuItems.length > 0" @change="handleMoreMenuChange">
      <option value="" disabled selected>更多</option>
      <option v-for="(menuItem, index) in moreMenuItems" :key="index" :value="menuItem">{{ menuItem }}</option>
    </select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menuItems: ['菜单项1', '菜单项2', '菜单项3', '菜单项4', '菜单项5', '菜单项6', '菜单项7', '菜单项8', '菜单项9', '菜单项10', '菜单项11', '菜单项12', '菜单项13', '菜单项14', '菜单项15', '菜单项16', '菜单项17', '菜单项18', '菜单项19', '菜单项20'], // 菜单项数据
      visibleMenuItems: [], // 可见的菜单项
      moreMenuItems: [], // 更多选项中的菜单项
      selectedMenuItem: '' // 用户选择的菜单项
    };
  },
  computed: {
    visibleMenuLength() {
      // 可见菜单项的长度
      return this.visibleMenuItems.length;
    }
  },
  mounted() {
    this.updateVisibleMenu();
    window.addEventListener('resize', this.updateVisibleMenu);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.updateVisibleMenu);
  },
  methods: {
    updateVisibleMenu() {
      // 更新可见菜单项和更多选项
      const menuContainerWidth = document.querySelector('.menu').offsetWidth;
      const menuItemWidth = 100; // 假设每个菜单项的宽度为100px

      this.visibleMenuItems = [];
      this.moreMenuItems = [];

      let totalWidth = 0;
      for (let i = 0; i < this.menuItems.length; i++) {
        if (totalWidth + menuItemWidth <= menuContainerWidth) {
          this.visibleMenuItems.push(this.menuItems[i]);
          totalWidth += menuItemWidth;
        } else {
          this.moreMenuItems.push(this.menuItems[i]);
        }
      }
      console.log('visibleMenuItems',this.visibleMenuItems);
    },
    handleMenuItemClick(menuItem) {
      // 处理菜单项点击事件
      this.selectedMenuItem = menuItem;
      // 执行相应的操作
      console.log('用户选择的菜单项:', menuItem);
    },
    handleMoreMenuChange() {
      // 处理更多选项下拉框的change事件
      const selectedMenuItem = this.selectedMenuItem;
      // 执行相应的操作
      console.log('用户选择的菜单项:', selectedMenuItem);
    }
  }
};
</script>

<style>
.menu {
  width: 100%;
}

.visible-menu {
  display: flex;
}

.visible-menu div {
  padding: 0 10px;
  cursor: pointer;
}

.more-menu {
  width: 100%;
  padding: 5px;
  margin-top: 5px;
}
</style>