vue3 动态按钮，动态显示按钮超过3个下拉

Vue3 中动态按钮及下拉功能通常用于数据量较大的列表场景，比如当有大量按钮需要展示，但一次性加载过多可能会导致性能问题。你可以使用 `v-for` 指令结合递归组件或条件渲染来实现在超过一定数量后显示下拉菜单。

1. 使用 `v-if` 或者 `v-show` 来控制是否显示下拉：
当按钮数大于某个阈值（例如3），隐藏部分按钮并显示一个下拉箭头或“更多”按钮，点击后通过展开组件或弹出层显示剩余内容。

<template>
  <div>
    <button v-for="(item, index) in items" :key="index">
      {{ item.name }}
      <!-- 显示下拉标志 -->
      <span v-if="showDropdown && index >= limit">...[更多]</span>
    </button>
    <!-- 下拉组件，只在需要时显示 -->
    <ul v-if="showDropdown" @click.prevent="hideDropdown">
      <li v-for="item in remainingItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 你的所有按钮数组
      limit: 3,
      showDropdown: false, // 初始状态为假，表示未显示下拉
      remainingItems: [] // 超过限制的额外项
    };
  },
  methods: {
    hideDropdown() { this.showDropdown = false; }
    // 添加处理点击事件的逻辑，如更新remainingItems
  },
  computed: {
    // 当按钮数量超过limit时设置showDropdown为真
    computedItemsLength() {
      return this.items.length;
    }
  },
  watch: {
    computedItemsLength(newVal, oldVal) {
      if (newVal > this.limit) {
        this.showDropdown = true;
        this.remainingItems = this.items.slice(this.limit);
      } else {
        this.showDropdown = false;
        this.remainingItems = [];
      }
    }
  }
};
</script>