前言

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

全局注冊(cè)組件

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

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

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

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

組件的實(shí)現(xiàn)

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

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

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

樹(shù)形組件的基本結(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>

如圖：

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

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

完善組件(添加點(diǎn)擊事件，過(guò)渡效果)????

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

這里只展示了新增的代碼，給li添加了一個(gè)點(diǎn)擊事件：

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

添加過(guò)渡

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

• v-enter-from：進(jìn)入動(dòng)畫(huà)的起始狀態(tài)。
• v-enter-active：進(jìn)入動(dòng)畫(huà)的生效狀態(tài)。
• v-leave-active：離開(kāi)動(dòng)畫(huà)的生效狀態(tài)
• v-leave-to：離開(kāi)動(dòng)畫(huà)的結(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;
}

總結(jié)：

通過(guò)對(duì)這個(gè)組件的實(shí)現(xiàn)，我們有掌握了對(duì)遞歸組件的使用以及簡(jiǎn)單的實(shí)現(xiàn)，學(xué)習(xí)的時(shí)候可以對(duì)自己好奇的東西嘗試自己去實(shí)現(xiàn)，這樣做我們可以學(xué)習(xí)的更快，并且使自己有一些小小的成就感。

到此這篇關(guān)于vue3+ts實(shí)現(xiàn)樹(shù)形組件(菜單組件)的文章就介紹到這了,更多相關(guān)vue3 ts樹(shù)形組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論