vue3+ts實現(xiàn)樹形組件(菜單組件)

更新時間：2023年05月05日 10:52:33 作者：前端隨想

本文主要介紹了vue3+ts實現(xiàn)樹形組件(菜單組件)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

之前在使用element-plus的使用，使用el-menu組件，并且使用了遞歸思想完成了無限極菜單的展開，現(xiàn)在想要自己手寫一個簡單的樹形組件，同樣使用遞歸的思想

全局注冊組件

文件結(jié)構(gòu)：

---mTree
  ---index.ts
  ---mTree.vue

在index.ts文件中引入組件然后注冊，并最后在main.ts文件中引入并且使用app.use

import  mTree  from "./mTree.vue"
mTree.install = app => {
   app.component(mTree.name,mTree)
}
export default mTree

組件的實現(xiàn)

首先我們先要創(chuàng)建一個樹狀的數(shù)據(jù)，分清楚層級關(guān)系

const state = reactive({
  treeOptions: [
    {
      label: '一級',
      children: [
       ...
        {
          label: '一級-3',
          children: [
            ....
          ],
        },
      ],
    },
   ...
})

就像這樣的層級關(guān)系，當(dāng)然這里面我們只是模擬數(shù)據(jù)，真實的項目開發(fā)過程中應(yīng)該是后端給前端數(shù)據(jù)，然后前端在根據(jù)數(shù)據(jù)進(jìn)行渲染

樹形組件的基本結(jié)構(gòu)：

<template>
  <li v-for="item in options"
      :key="item.label">
    {{ item.label }}
      <ul  v-if="item.children&&item.children.length>0">
        <mTree :options="item.children"></mTree>
      </ul>
  </li>
?
</template>

如圖：

解釋一下這個組件的這個結(jié)構(gòu)：

首先使用li組件渲染第一層結(jié)構(gòu)，然后在ul里面重新嵌套mTree樹形組件，并且判斷當(dāng)前item元素是否有children屬性，如果有這個屬性，那么就進(jìn)行渲染，否則的話就不渲染。這樣就不停的遞歸，到最后一個children都渲染結(jié)束之后結(jié)束了。這樣在不確定有多少層級時就可以使用，可以實現(xiàn)無限的層級嵌套。

完善組件(添加點擊事件，過渡效果)????

<li v-for...
      @click.stop="toggleisOpen(item)">
    {{ item.label }}
    <transition name="slide-fade">
      <ul v-show="item.isOpen">...</ul>
    </transition>
  </li>

這里只展示了新增的代碼，給li添加了一個點擊事件：

interface optionsProp {
  label: string
  isOpen?: boolean
  children?: optionsProp[]
}
const props = defineProps({
  options: {
    type: Array as PropType<optionsProp[]>,
    default() {
      return []
    },
  },
})
const toggleisOpen = (item: any) => {
  item.isOpen = !item.isOpen
}

注意ul通過v-show來控制顯示或者隱藏，當(dāng)?shù)谝淮吸c擊的時候由于源數(shù)據(jù)中沒有isOpen，所以這個時候取反就是true，就會顯示點擊元素的子級。還有一點要注意的時，由于冒泡會導(dǎo)致出現(xiàn)一些問題，所以在點擊事件后面加上.stop來阻止冒泡。

添加過渡

這里我們使用了Vue3官方中的過渡，不是很了解的小伙伴可以去官網(wǎng)查看，簡單來說就是使用transition包裹要使用過渡效果的部分，然后定義name屬性，本文中的name為slide-fade所以下面的樣式就是這樣的：

v-enter-from：進(jìn)入動畫的起始狀態(tài)。
v-enter-active：進(jìn)入動畫的生效狀態(tài)。
v-leave-active：離開動畫的生效狀態(tài)
v-leave-to：離開動畫的結(jié)束狀態(tài)。

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
?
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
?
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}