console 命令行工具 X clear

console

// 创建 Vue 实例
new Vue({
  el: '#app',
  data: {
    showMore: false, // 控制更多按钮下拉菜单的显示
    userPermissions: ['button1', 'button3', 'button5', 'button7'], // 用户权限
    allButtons: [ // 所有按钮的数据
      { name: 'button1', action: () => { /* 功能1 */ } },
      { name: 'button2', action: () => { /* 功能2 */ } },
      { name: 'button3', action: () => { /* 功能3 */ } },
      { name: 'button4', action: () => { /* 功能4 */ } },
      { name: 'button5', action: () => { /* 功能5 */ } },
      { name: 'button6', action: () => { /* 功能6 */ } },
      { name: 'button7', action: () => { /* 功能7 */ } },
      { name: 'button8', action: () => { /* 功能8 */ } },
    ],
  },
  computed: {
    toolbarButtons() {
      // 根据用户权限计算可见按钮
      const visibleButtons = this.allButtons.filter(button => this.userPermissions.includes(button.name));

      // 限制工具栏上最多显示 3 个按钮
      if (visibleButtons.length > 3) {
        return visibleButtons.slice(0, 3);
      }
      
      return visibleButtons;
    },
    moreButtons() {
      // 计算剩余的按钮（不在工具栏按钮中的按钮）
      return this.allButtons.filter(button => !this.toolbarButtons.includes(button));
    },
  },
});

<!DOCTYPE html>
<html>
<head>
  <!-- 引入 Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div class="toolbar">
      <button v-for="button in toolbarButtons" :key="button.name" @click="button.action">{{ button.name }}</button>
      <button v-if="moreButtons.length > 0" @click="showMore = !showMore">更多</button>
      <div v-if="showMore" class="dropdown">
        <button v-for="button in moreButtons" :key="button.name" @click="button.action">{{ button.name }}</button>
      </div>
    </div>
  </div>
</body>
</html>