vue3+ts實現(xiàn)樹形組件(菜單組件)
前言
之前在使用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)系，當然這里面我們只是模擬數(shù)據(jù)，真實的項目開發(fā)過程中應該是后端給前端數(shù)據(jù)，然后前端在根據(jù)數(shù)據(jù)進行渲染
樹形組件的基本結(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樹形組件，并且判斷當前item元素是否有children屬性，如果有這個屬性，那么就進行渲染，否則的話就不渲染。這樣就不停的遞歸，到最后一個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來控制顯示或者隱藏，當?shù)谝淮吸c擊的時候由于源數(shù)據(jù)中沒有isOpen，所以這個時候取反就是true，就會顯示點擊元素的子級。還有一點要注意的時，由于冒泡會導致出現(xiàn)一些問題，所以在點擊事件后面加上.stop來阻止冒泡。
添加過渡
這里我們使用了Vue3官方中的過渡，不是很了解的小伙伴可以去官網(wǎng)查看，簡單來說就是使用transition包裹要使用過渡效果的部分，然后定義name屬性，本文中的name為slide-fade所以下面的樣式就是這樣的：
v-enter-from：進入動畫的起始狀態(tài)。v-enter-active：進入動畫的生效狀態(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;
}總結(jié)：
通過對這個組件的實現(xiàn)，我們有掌握了對遞歸組件的使用以及簡單的實現(xiàn)，學習的時候可以對自己好奇的東西嘗試自己去實現(xiàn)，這樣做我們可以學習的更快，并且使自己有一些小小的成就感。
到此這篇關(guān)于vue3+ts實現(xiàn)樹形組件(菜單組件)的文章就介紹到這了,更多相關(guān)vue3 ts樹形組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue初始化項目時報錯:Error:Cannot find module vue-temp
這篇文章主要介紹了vue初始化項目時報錯:Error:Cannot find module vue-template-compiler問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue使用websocket的方法,結(jié)合實例形式對比分析了vue.js使用websocket的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-06-06
當vue使用庫中的getvalue方法時，需要調(diào)用相關(guān)方法，通過定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對vue使用引用庫中的方法，感興趣的朋友一起看看吧2021-07-07
vue3+element?Plus使用el-tabs標簽頁解決頁面刷新不回到默認頁的問題
這篇文章主要介紹了vue3+element?Plus使用el-tabs標簽頁頁面刷新不回到默認頁的操作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程
大家都知道vue.js通過v-on完成事件處理與綁定，但最近使用v-on的時候遇到了一個問題，所以下面這篇文章主要給大家介紹了關(guān)于vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程，需要的朋友可以參考下。2017-07-07
這篇文章主要為大家詳細介紹了Vue.js手風琴菜單組件開發(fā)實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue2?Element?description組件列合并詳解
在使用Vue的時候經(jīng)常會涉及到表格的列合并,下面這篇文章主要給大家介紹了給大家Vue2?Element?description組件列合并的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue項目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04