前端UI組件【免費(fèi)下載鏈接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.項(xiàng)目地址https://gitcode.com/gh_mirrors/ui4/ui點(diǎn)擊查看免費(fèi)下載本篇技術(shù)指南圍繞 Nuxt UI即當(dāng)前倉(cāng)庫(kù)gh_mirrors/ui4/ui對(duì)應(yīng)的開(kāi)源組件庫(kù)中的Tree組件展開(kāi)。Tree 用于以樹(shù)形結(jié)構(gòu)展示和交互層級(jí)化數(shù)據(jù)例如文件目錄、組織架構(gòu)、分類菜單等。讀完本文你將掌握items數(shù)據(jù)模型、選中/展開(kāi)的受控用法、扁平化渲染、圖標(biāo)定制、復(fù)選框聯(lián)動(dòng)、拖拽排序與虛擬化等完整實(shí)戰(zhàn)能力并能借助源碼與測(cè)試?yán)斫馄涞讓訉?shí)現(xiàn)。組件定位與底層架構(gòu)Tree 是一個(gè)基于 Reka UI其中TreeRoot負(fù)責(zé)整棵樹(shù)的選中、展開(kāi)狀態(tài)管理與鍵盤交互TreeItem負(fù)責(zé)單個(gè)節(jié)點(diǎn)的展開(kāi)/選中行為并通過(guò)as-child透?jìng)鱐reeVirtualizer在啟用虛擬化時(shí)按需渲染可見(jiàn)節(jié)點(diǎn)。組件對(duì)外暴露的類型TreeItem與TreeProps均在同一文件中定義TypeScript 泛型T extends TreeItem[]、M extends boolean讓多選與非多選場(chǎng)景擁有精確的類型推導(dǎo)見(jiàn) test/components/Tree.spec.ts 底部的expectEmitPayloadType斷言。基礎(chǔ)用法用 items 渲染一棵樹(shù)在 Nuxt 中直接使用UTreeVue 場(chǎng)景對(duì)應(yīng)vue.UTree通過(guò)items屬性傳入層級(jí)數(shù)據(jù)script setup langts import type { TreeItem } from #ui/components/Tree const items: TreeItem[] [ { label: app/, defaultExpanded: true, children: [ { label: composables/, children: [ { label: useAuth.ts, icon: i-vscode-icons-file-type-typescript }, { label: useUser.ts, icon: i-vscode-icons-file-type-typescript } ] }, { label: components/, defaultExpanded: true, children: [ { label: Card.vue, icon: i-vscode-icons-file-type-vue }, { label: Button.vue, icon: i-vscode-icons-file-type-vue } ] } ] }, { label: app.vue, icon: i-vscode-icons-file-type-vue }, { label: nuxt.config.ts, icon: i-vscode-icons-file-type-nuxt } ] /script template UTree :itemsitems classw-60 / /template上例中帶children的節(jié)點(diǎn)自動(dòng)渲染為可展開(kāi)的父節(jié)點(diǎn)文件夾形態(tài)葉子節(jié)點(diǎn)渲染為普通條目defaultExpanded: true讓app/與components/默認(rèn)展開(kāi)。items 數(shù)據(jù)結(jié)構(gòu)與 TreeItem 屬性items是TreeItem[]數(shù)組每個(gè)節(jié)點(diǎn)支持以下屬性屬性類型說(shuō)明iconstring節(jié)點(diǎn)前導(dǎo)圖標(biāo)Iconify 名稱通常用于葉子文件圖標(biāo)labelstring節(jié)點(diǎn)顯示文本也是默認(rèn)唯一標(biāo)識(shí)來(lái)源trailingIconstring節(jié)點(diǎn)右側(cè)圖標(biāo)用于覆蓋父節(jié)點(diǎn)的展開(kāi)箭頭defaultExpandedboolean節(jié)點(diǎn)是否默認(rèn)展開(kāi)disabledboolean禁用單個(gè)節(jié)點(diǎn)slotstring為節(jié)點(diǎn)指定自定義插槽名稱實(shí)現(xiàn)逐節(jié)點(diǎn)定制childrenTreeItem[]子節(jié)點(diǎn)數(shù)組存在即視為父節(jié)點(diǎn)onToggle(e: TreeItemToggleEvent) void節(jié)點(diǎn)級(jí)展開(kāi)/收起回調(diào)onSelect(e: TreeItemSelectEvent) void節(jié)點(diǎn)級(jí)選中回調(diào)classany作用于該節(jié)點(diǎn)鏈接的 classuiPartial...作用于該節(jié)點(diǎn)的插槽 class含item、itemWithChildren、link、linkLeadingIcon、linkLabel、linkTrailing、linkTrailingIcon、listWithChildren其中class與ui允許對(duì)單個(gè)節(jié)點(diǎn)進(jìn)行局部樣式覆蓋[key: string]: any允許攜帶任意自定義字段如id供getKey或數(shù)據(jù)邏輯使用。關(guān)于唯一標(biāo)識(shí)的重要約束每個(gè)節(jié)點(diǎn)都需要一個(gè)唯一標(biāo)識(shí)符。默認(rèn)情況下組件以label作為標(biāo)識(shí)若label不唯一例如多個(gè)重名目錄必須通過(guò)get-key函數(shù)返回唯一標(biāo)識(shí)或使用label-key指定參與標(biāo)識(shí)的字段。源碼中g(shù)etItemKey的邏輯為優(yōu)先使用props.getKey(item)否則回退到getItemLabel(item)即labelKey字段默認(rèn)label// src/runtime/components/Tree.vue function getItemKey(item: TreeItem): string { return props.getKey ? props.getKey(item) || getItemLabel(item) : getItemLabel(item) }多選multiple 與選中值設(shè)置multiple后v-model或default-value的值由單個(gè)節(jié)點(diǎn)變?yōu)楣?jié)點(diǎn)數(shù)組UTree :itemsitems multiple default-expanded classw-60 /defaultExpanded在這里也接受TreeItem[]以默認(rèn)展開(kāi)多個(gè)節(jié)點(diǎn)。多選與受控選中均可在 test/components/Tree.spec.ts 中找到對(duì)應(yīng)渲染用例with multiple、with multiple and modelValue、with multiple and defaultValue。渲染模式nested 與扁平列表nested屬性控制樹(shù)以嵌套 DOM 結(jié)構(gòu)渲染還是以扁平列表渲染默認(rèn)trueUTree :itemsitems :nestedfalse classw-60 /當(dāng)nested為false時(shí)所有節(jié)點(diǎn)渲染在同一層級(jí)依靠縮進(jìn)表現(xiàn)層級(jí)關(guān)系——這正是拖拽與虛擬化場(chǎng)景所依賴的形態(tài)。源碼中nested的計(jì)算是props.virtualize ? false : props.nested即開(kāi)啟虛擬化時(shí)強(qiáng)制扁平化。扁平模式下的縮進(jìn)通過(guò)內(nèi)聯(lián)padding-inline-start計(jì)算由flattenedPaddingFormula按size與節(jié)點(diǎn)level推算xs到xl各尺寸對(duì)應(yīng)不同的基礎(chǔ)值與每級(jí)遞增量見(jiàn) src/runtime/components/Tree.vue 第 185–195 行。因此即使傳入自定義主題尺寸也不會(huì)拋錯(cuò)——測(cè)試does not throw when flattened with a custom theme size專門覆蓋了該場(chǎng)景。外觀定制Color 與 Sizecolor控制選中態(tài)高亮顏色默認(rèn)primarysize控制緊湊程度支持xs/sm/md/lg/xl默認(rèn)mdUTree :itemsitems colorneutral sizexl classw-60 /主題定義src/theme/tree.ts中color變體為選中態(tài)鏈接生成before:outline-{color}/25輪廓neutral使用before:outline-inverted/25size變體則調(diào)整內(nèi)邊距、字號(hào)與圖標(biāo)尺寸。Trailing Icon父節(jié)點(diǎn)展開(kāi)箭頭父節(jié)點(diǎn)右側(cè)默認(rèn)渲染i-lucide-chevron-down可通過(guò)trailing-icon覆蓋UTree :itemsitems trailing-iconi-lucide-arrow-down classw-60 /若某個(gè)節(jié)點(diǎn)自身聲明了trailingIcon則節(jié)點(diǎn)級(jí)圖標(biāo)始終優(yōu)先于組件級(jí)trailing-icon。該默認(rèn)圖標(biāo)定義在appConfig.ui.icons.chevronDown默認(rèn)值見(jiàn) src/theme/icons.ts 的i-lucide-chevron-down可在 Nuxt 的app.config.ts或 Vue 的vite.config.ts中全局替換。Expanded / Collapsed Icon文件夾圖標(biāo)父節(jié)點(diǎn)未展開(kāi)時(shí)默認(rèn)顯示i-lucide-folder展開(kāi)后顯示i-lucide-folder-open分別對(duì)應(yīng)collapsed-icon與expanded-iconUTree :itemsitems expanded-iconi-lucide-book-open collapsed-iconi-lucide-book classw-60 /全局默認(rèn)值位于appConfig.ui.icons.folder/appConfig.ui.icons.folderOpensrc/theme/icons.ts。渲染優(yōu)先級(jí)在 src/runtime/components/Tree.vue 模板中體現(xiàn)節(jié)點(diǎn)自帶icon優(yōu)先否則有子節(jié)點(diǎn)時(shí)按展開(kāi)狀態(tài)渲染expandedIcon或collapsedIcon。Disabled禁用組件級(jí)disabled會(huì)禁用整棵樹(shù)的全部交互也可以只對(duì)單個(gè)節(jié)點(diǎn)設(shè)置item.disabled。禁用態(tài)的鏈接樣式由主題disabled變體定義cursor-not-allowed opacity-75UTree :itemsitems disabled classw-60 /受控用法選中與展開(kāi)控制選中項(xiàng)通過(guò)v-model或default-value受控管理選中項(xiàng)傳入v-model時(shí)建議同時(shí)用get-key指明取值函數(shù)確保值與數(shù)據(jù)一一對(duì)應(yīng)script setup langts const selected refTreeItem() const getKey (item: TreeItem) item.label /script template UTree v-modelselected :itemsitems :get-keygetKey classw-60 / /template若希望點(diǎn)擊父節(jié)點(diǎn)時(shí)只展開(kāi)/收起而不選中可通過(guò)節(jié)點(diǎn)屬性item.onSelect或組件級(jí)select事件阻止const onSelect (event: TreeItemSelectEventTreeItem) { if (event.originalEvent.type click event.node.children) { // 阻止選中僅切換展開(kāi)狀態(tài) } }控制展開(kāi)項(xiàng)同理展開(kāi)狀態(tài)可通過(guò)v-model數(shù)組或default-expanded受控item.onToggle或組件級(jí)toggle事件可用于阻止展開(kāi)/收起例如選中父節(jié)點(diǎn)但不展開(kāi)其子項(xiàng)的場(chǎng)景。高級(jí)示例4.1節(jié)點(diǎn)內(nèi)嵌復(fù)選框在item-leading插槽中放置 Checkbox 組件配合multiple、propagate-select選中向父/子節(jié)點(diǎn)傳播與bubble-select屬性即可實(shí)現(xiàn)帶父子聯(lián)動(dòng)關(guān)系的勾選樹(shù)再通過(guò)select、toggle事件同步選中與展開(kāi)狀態(tài)。由于Checkbox本身渲染為button需要通過(guò)as屬性將樹(shù)節(jié)點(diǎn)由button改為div以規(guī)避嵌套按鈕的無(wú)障礙問(wèn)題UTree :itemsitems multiple propagate-select bubble-select :as{ root: ul, link: div } classw-60 /拖拽排序使用vueuse/integrations提供的useSortable內(nèi)部封裝 Sortable.js可讓樹(shù)支持拖拽。前提是設(shè)置nested: false將樹(shù)渲染為扁平列表使每個(gè)節(jié)點(diǎn)成為可被 Sortable 識(shí)別/移動(dòng)的同級(jí)元素import { useSortable } from vueuse/integrations/useSortable const treeRef refHTMLElement() const { } useSortable(treeRef, items, { animation: 150 })UTree reftreeRef :itemsitems :nestedfalse classw-60 /虛擬化大數(shù)據(jù)量渲染virtualize屬性可為大列表啟用虛擬化傳true或配置對(duì)象{ estimateSize, overscan }UTree :itemsitems :virtualize{ estimateSize: 32, overscan: 12 } classw-60 /estimateSize每項(xiàng)預(yù)估高度像素默認(rèn)32也可以是(index) number函數(shù)overscan可視區(qū)外額外渲染的項(xiàng)數(shù)默認(rèn)12。需要注意虛擬化開(kāi)啟時(shí)樹(shù)結(jié)構(gòu)會(huì)被扁平化效果等同nested: false且滾動(dòng)容器由主題virtualize: true變體提供root: overflow-y-auto。源碼通過(guò)getEstimateSize(items, size)見(jiàn) src/utils/virtualizer.ts依據(jù)當(dāng)前size自動(dòng)推算默認(rèn)預(yù)估高度實(shí)際渲染由 Reka UI 的TreeVirtualizer完成。自定義插槽節(jié)點(diǎn)級(jí)slot屬性可指定個(gè)性化插槽每個(gè)具名插槽又衍生出五個(gè)子插槽#{item.slot}-wrapper包裹整個(gè)節(jié)點(diǎn)#{item.slot}節(jié)點(diǎn)主體內(nèi)容#{item.slot}-leading前導(dǎo)區(qū)域圖標(biāo)#{item.slot}-label文本標(biāo)簽區(qū)域#{item.slot}-trailing尾部區(qū)域展開(kāi)箭頭未指定slot時(shí)對(duì)應(yīng)基礎(chǔ)插槽item-wrapper/item/item-leading/item-label/item-trailing。所有插槽均暴露以下作用域?qū)傩詫傩哉f(shuō)明item當(dāng)前節(jié)點(diǎn)數(shù)據(jù)index節(jié)點(diǎn)在同級(jí)中的索引level節(jié)點(diǎn)所在層級(jí)從 1 開(kāi)始expanded/selected/indeterminate展開(kāi)、選中、半選狀態(tài)handleSelect/handleToggle手動(dòng)觸發(fā)選中/展開(kāi)的行為函數(shù)ui當(dāng)前主題的ui對(duì)象含插槽 class示例為slot: app的節(jié)點(diǎn)定制內(nèi)容template #app-label{ item } span classfont-bold{{ item.label }}/span /template主題定制Tree 的主題結(jié)構(gòu)定義在 src/theme/tree.ts包含插槽樣式與變體插槽默認(rèn)樣式要點(diǎn)rootrelative isolate虛擬化時(shí)追加overflow-y-autoitemw-fulllistWithChildrenborder-s border-default左側(cè)層級(jí)線itemWithChildrenps-1.5 -ms-px對(duì)齊層級(jí)線link彈性布局、text-sm、before偽元素圓角高亮底linkLeadingIcon/linkTrailingIconshrink-0展開(kāi)箭頭帶group-data-expanded:rotate-180旋轉(zhuǎn)動(dòng)畫linkLabeltruncate文本截?cái)鄉(xiāng)inkTrailingms-auto inline-flex gap-1.5變體方面支持virtualize、color、size、selected、disabled默認(rèn)變體為color: primary、size: mdselected與color的組合通過(guò)compoundVariants生成選中態(tài)文字顏色如text-primary未選中且未禁用時(shí)提供hover:text-highlighted懸停反饋。通過(guò)app.config.tsNuxt或vite.config.tsVue中的ui.tree鍵即可覆蓋上述任意插槽 class也可利用ui.icons.chevronDown、ui.icons.folder、ui.icons.folderOpen全局更換默認(rèn)圖標(biāo)。API 匯總Props核心屬性類型默認(rèn)值說(shuō)明asany \| { root, link }ul/button根節(jié)點(diǎn)與鏈接的渲染元素itemsTreeItem[]—樹(shù)數(shù)據(jù)colorprimary \| neutral \| ...primary選中態(tài)顏色sizexs \| sm \| md \| lg \| xlmd緊湊程度getKey(item) string—唯一標(biāo)識(shí)函數(shù)labelKeystringlabel作為標(biāo)識(shí)/文本的字段multiplebooleanfalse是否多選modelValue/defaultValueTreeItem \| TreeItem[]—受控/非受控選中值nestedbooleantrue嵌套 DOM 還是扁平列表virtualizeboolean \| { estimateSize?, overscan? }false虛擬化開(kāi)關(guān)與參數(shù)trailingIconstringui.icons.chevronDown父節(jié)點(diǎn)展開(kāi)箭頭expandedIcon/collapsedIconstringui.icons.folderOpen/ui.icons.folder展開(kāi)/收起態(tài)文件夾圖標(biāo)disabledbooleanfalse禁用整棵樹(shù)expanded/defaultExpandedTreeItem[]—展開(kāi)狀態(tài)受控/默認(rèn)值selectionBehavior/propagateSelect/bubbleSelect/loop繼承自 Reka UI—選擇與焦點(diǎn)行為onSelect/onToggle回調(diào)—組件級(jí)選中/展開(kāi)回調(diào)Slotsitem-wrapper、item、item-leading、item-label、item-trailing以及由item.slot派生的動(dòng)態(tài)插槽#{slot}-wrapper、#{slot}、#{slot}-leading、#{slot}-label、#{slot}-trailing。所有插槽共享上文列出的作用域?qū)傩?。Emits組件發(fā)出繼承自 Reka UITreeRoot的事件主要包括update:modelValuev-model選中值、select選中某節(jié)點(diǎn)、toggle展開(kāi)/收起某節(jié)點(diǎn)等且攜帶對(duì)應(yīng)節(jié)點(diǎn)數(shù)據(jù)供item.onSelect/item.onToggle之外的全局?jǐn)r截使用。測(cè)試與可訪問(wèn)性保障test/components/Tree.spec.ts 以快照渲染方式覆蓋了本文提及的絕大部分能力items、modelValue、defaultValue、expanded、defaultExpanded、labelKey、getKey、multiple、disabled、nested、virtualize、三類圖標(biāo)、全部size變體、neutral顏色、as、class、ui覆蓋以及item-wrapper/item/item-leading/item-trailing與動(dòng)態(tài)插槽的渲染。此外還包含兩項(xiàng)關(guān)鍵斷言通過(guò)axe無(wú)障礙審計(jì)passes accessibility tests驗(yàn)證了基于 Reka UI 的 WAI-ARIA 語(yǔ)義、鍵盤導(dǎo)航與焦點(diǎn)管理通過(guò)expectEmitPayloadType驗(yàn)證update:modelValue在普通與getKey場(chǎng)景下的載荷類型推導(dǎo)。結(jié)合文檔與測(cè)試可以確認(rèn) Tree 組件在交互語(yǔ)義與視覺(jué)表現(xiàn)上均具備生產(chǎn)可用性。建議在實(shí)際項(xiàng)目中優(yōu)先使用getKey保證數(shù)據(jù)唯一性并在數(shù)據(jù)量較大時(shí)開(kāi)啟virtualize以獲得穩(wěn)定性能。提示本文對(duì)應(yīng)的官方交互式示例選中控制、展開(kāi)控制、復(fù)選框樹(shù)、拖拽、虛擬化、自定義插槽均可通過(guò)倉(cāng)庫(kù)文檔目錄 docs/content/docs/2.components/tree.md 中嵌入的 component-example 宏查看源碼與實(shí)時(shí)效果。贊分享前端UI組件【免費(fèi)下載鏈接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.項(xiàng)目地址https://gitcode.com/gh_mirrors/ui4/ui點(diǎn)擊查看免費(fèi)下載相關(guān)推薦如何快速安裝 ESP-IDF用 EIM 一條命令裝好工具鏈完整覆蓋 4 大場(chǎng)景如何快速安裝 ESP IDF用 EIM 一條命令裝好工具鏈完整覆蓋 4 大場(chǎng)景 ESP IDF樂(lè)鑫 IoT 開(kāi)發(fā)框架是 Espressif 芯片的官方物聯(lián)網(wǎng)嵌入式手柄操作B站客戶端wiliwili 在Switch上從安裝到流暢播放的5步實(shí)戰(zhàn)指南手柄操作B站客戶端wiliwili 在Switch上從安裝到流暢播放的5步實(shí)戰(zhàn)指南 如果你想在電視或掌機(jī)上僅靠手柄就能刷視頻、發(fā)彈幕、追番劇而不必忍受傳統(tǒng)音視頻桌面應(yīng)用rsuite 樹(shù)形表格Tree Table完全指南層級(jí)數(shù)據(jù)的展示、展開(kāi)控制與虛擬化實(shí)戰(zhàn)rsuite 樹(shù)形表格Tree Table完全指南層級(jí)數(shù)據(jù)的展示、展開(kāi)控制與虛擬化實(shí)戰(zhàn) 樹(shù)形表格是展示具有層級(jí)結(jié)構(gòu)關(guān)系數(shù)據(jù)的表格形態(tài)它通過(guò)在普通表格中引前端UI組件上一篇Ente Locker 集合Collections使用指南用多標(biāo)簽式組織管理你的加密文檔下一篇Prometheus Operator 官方 CLI 參考o(jì)perator 二進(jìn)制全部命令與參數(shù)詳解創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考