Vue 遞迴多級選單

JS菌發表於2019-05-03
Vue遞迴

Vue 遞迴多級選單

⭐️ 更多前端技術和知識點，搜尋訂閱號 JS 菌 訂閱

考慮以下選單資料：

[
  {
    name: "About",
    path: "/about",
    children: [
      {
        name: "About US",
        path: "/about/us"
      },
      {
        name: "About Comp",
        path: "/about/company",
        children: [
          {
            name: "About Comp A",
            path: "/about/company/A",
            children: [
              {
                name: "About Comp A 1",
                path: "/about/company/A/1"
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: "Link",
    path: "/link"
  }
];
複製程式碼

需要實現的效果：

20190503142723.png

首先建立兩個元件 Menu 和 MenuItem

// Menuitem

<template>
  <li class="item">
    <slot />
  </li>
</template>
複製程式碼

MenuItem 是一個 li 標籤和 slot 插槽，允許往裡頭加入各種元素

<!-- Menu -->

<template>
  <ul class="wrapper">
    <!-- 遍歷 router 選單資料 -->
    <menuitem :key="index" v-for="(item, index) in router">
      <!-- 對於沒有 children 子選單的 item -->
      <span class="item-title" v-if="!item.children">{{item.name}}</span>

      <!-- 對於有 children 子選單的 item -->
      <template v-else>
        <span @click="handleToggleShow">{{item.name}}</span>
        <!-- 遞迴操作 -->
        <menu :router="item.children" v-if="toggleShow"></menu>
      </template>
    </menuitem>
  </ul>
</template>

<script>
  import MenuItem from "./MenuItem";

  export default {
    name: "Menu",
    props: ["router"], // Menu 元件接受一個 router 作為選單資料
    components: { MenuItem },
    data() {
      return {
        toggleShow: false // toggle 狀態
      };
    },
    methods: {
      handleToggleShow() {
        // 處理 toggle 狀態的是否展開子選單 handler
        this.toggleShow = !this.toggleShow;
      }
    }
  };
</script>
複製程式碼

Menu 元件外層是一個 ul 標籤，內部是 vFor 遍歷生成的 MenuItem

這裡有兩種情況需要做判斷，一種是 item 沒有 children 屬性，直接在 MenuItem 的插槽加入一個 span 元素渲染 item 的 title 即可；另一種是包含了 children 屬性的 item 這種情況下，不僅需要渲染 title 還需要再次引入 Menu 做遞迴操作，將 item.children 作為路由傳入到 router prop

最後在專案中使用：

<template>
  <div class="home">
    <menu :router="router"></menu>
  </div>
</template>

<script>
  import Menu from '@/components/Menu.vue'

  export default {
    name: 'home',
    components: {
      Menu
    },
    data () {
      return {
        router: // ... 省略選單資料
      }
    }
  }
</script>
複製程式碼

最後增加一些樣式：

MenuItem:

<style lang="stylus" scoped>
  .item {
    margin: 10px 0;
    padding: 0 10px;
    border-radius: 4px;
    list-style: none;
    background: skyblue;
    color: #fff;
  }
</style>
複製程式碼

Menu:

<style lang="stylus" scoped>
  .wrapper {
    cursor: pointer;

    .item-title {
      font-size: 16px;
    }
  }
</style>
複製程式碼

Menu 中 ul 標籤內的程式碼可以單獨提取出來，Menu 作為 wrapper 使用，遞迴操作部分的程式碼也可以單獨提取出來

JS 菌公眾賬號

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦 ?

相關文章