怎么使用vue3+ts實(shí)現(xiàn)樹形組件

今天小編給大家分享一下怎么使用vue3+ts實(shí)現(xiàn)樹形組件的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

全局注冊組件

文件結(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

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

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

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

就像這樣的層級關(guān)系，當(dāng)然這里面我們只是模擬數(shù)據(jù)，真實(shí)的項(xiàng)目開發(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>

如圖：

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

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

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

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

以上就是“怎么使用vue3+ts實(shí)現(xiàn)樹形組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。