[{"data":1,"prerenderedAt":629},["ShallowReactive",2],{"navigation_docs":3,"-guide-typed":102,"-guide-typed-surround":624},[4,82,87,92,97],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"指南","i-lucide-list-tree","\u002Fguide","1.guide",[10,14,19,24,29,34,39,44,48,53,58,63,68,73,77],{"title":11,"path":7,"stem":12,"icon":13},"指南总览","1.guide\u002Findex","i-lucide-map",{"title":15,"path":16,"stem":17,"icon":18},"快速开始","\u002Fguide\u002Fquick-start","1.guide\u002F1.quick-start","i-lucide-rocket",{"title":20,"path":21,"stem":22,"icon":23},"键盘导航与可访问性","\u002Fguide\u002Fkeyboard","1.guide\u002F10.keyboard","i-lucide-keyboard",{"title":25,"path":26,"stem":27,"icon":28},"类型化 createTypedOkrTree","\u002Fguide\u002Ftyped","1.guide\u002F11.typed","i-lucide-type",{"title":30,"path":31,"stem":32,"icon":33},"Vue Devtools 面板","\u002Fguide\u002Fdevtools","1.guide\u002F12.devtools","i-lucide-wrench",{"title":35,"path":36,"stem":37,"icon":38},"需要注意的行为","\u002Fguide\u002Fbehavior","1.guide\u002F13.behavior","i-lucide-triangle-alert",{"title":40,"path":41,"stem":42,"icon":43},"仓库与本地开发","\u002Fguide\u002Frepo","1.guide\u002F14.repo","i-lucide-folder-git-2",{"title":45,"path":46,"stem":47},"Demo 总览（可交互）","\u002Fguide\u002Fdemos","1.guide\u002F2.demos",{"title":49,"path":50,"stem":51,"icon":52},"自定义节点内容","\u002Fguide\u002Fnode-content","1.guide\u002F3.node-content","i-lucide-layout-template",{"title":54,"path":55,"stem":56,"icon":57},"受控状态与方法","\u002Fguide\u002Fcontrolled","1.guide\u002F4.controlled","i-lucide-sliders-horizontal",{"title":59,"path":60,"stem":61,"icon":62},"复选框与拖拽","\u002Fguide\u002Finteraction","1.guide\u002F5.interaction","i-lucide-mouse-pointer-click",{"title":64,"path":65,"stem":66,"icon":67},"懒加载子节点","\u002Fguide\u002Flazy","1.guide\u002F6.lazy","i-lucide-layers",{"title":69,"path":70,"stem":71,"icon":72},"虚拟滚动 virtual","\u002Fguide\u002Fvirtual","1.guide\u002F7.virtual","i-lucide-scan",{"title":74,"path":75,"stem":76,"icon":72},"画布缩放 OkrTreeViewport","\u002Fguide\u002Fviewport","1.guide\u002F8.viewport",{"title":78,"path":79,"stem":80,"icon":81},"多树根对齐 OkrTreeGroup","\u002Fguide\u002Fgroup","1.guide\u002F9.group","i-lucide-network",{"title":83,"path":84,"stem":85,"icon":86},"主题与样式定制","\u002Ftheme","2.theme","i-lucide-palette",{"title":88,"path":89,"stem":90,"icon":91},"API","\u002Fapi","3.api","i-lucide-braces",{"title":93,"path":94,"stem":95,"icon":96},"与 vue-okr-tree 的差异（迁移说明）","\u002Fmigration","4.migration","i-lucide-arrow-right-left",{"title":98,"path":99,"stem":100,"icon":101},"更新日志","\u002Fchangelog","5.changelog","i-lucide-history",{"id":103,"title":25,"body":104,"description":617,"extension":618,"links":619,"meta":620,"navigation":621,"path":26,"seo":622,"stem":27,"__hash__":623},"docs\u002F1.guide\u002F11.typed.md",{"type":105,"value":106,"toc":613},"minimark",[107,127,259,328,333,373,401,404,411,538,597,609],[108,109,110,111,115,116,119,120,123,124,126],"p",{},"运行时返回的就是 ",[112,113,114],"code",{},"VueOkrTree","，仅做类型收窄，让 ",[112,117,118],{},"data"," \u002F ",[112,121,122],{},"leftData"," 与插槽作用域中的 ",[112,125,118],{}," 带上你的数据类型：",[128,129,135],"pre",{"className":130,"code":131,"filename":132,"language":133,"meta":134,"style":134},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createTypedOkrTree } from 'vue3-okr-tree'\n\ninterface Dept {\n  id: number\n  label: string\n  leader?: string\n}\nconst DeptTree = createTypedOkrTree\u003CDept>()\n","example.ts","ts","",[112,136,137,170,177,191,204,215,226,232],{"__ignoreMap":134},[138,139,142,146,150,154,157,160,163,167],"span",{"class":140,"line":141},"line",1,[138,143,145],{"class":144},"s7zQu","import",[138,147,149],{"class":148},"sMK4o"," {",[138,151,153],{"class":152},"sTEyZ"," createTypedOkrTree",[138,155,156],{"class":148}," }",[138,158,159],{"class":144}," from",[138,161,162],{"class":148}," '",[138,164,166],{"class":165},"sfazB","vue3-okr-tree",[138,168,169],{"class":148},"'\n",[138,171,173],{"class":140,"line":172},2,[138,174,176],{"emptyLinePlaceholder":175},true,"\n",[138,178,180,184,188],{"class":140,"line":179},3,[138,181,183],{"class":182},"spNyl","interface",[138,185,187],{"class":186},"sBMFI"," Dept",[138,189,190],{"class":148}," {\n",[138,192,194,198,201],{"class":140,"line":193},4,[138,195,197],{"class":196},"swJcz","  id",[138,199,200],{"class":148},":",[138,202,203],{"class":186}," number\n",[138,205,207,210,212],{"class":140,"line":206},5,[138,208,209],{"class":196},"  label",[138,211,200],{"class":148},[138,213,214],{"class":186}," string\n",[138,216,218,221,224],{"class":140,"line":217},6,[138,219,220],{"class":196},"  leader",[138,222,223],{"class":148},"?:",[138,225,214],{"class":186},[138,227,229],{"class":140,"line":228},7,[138,230,231],{"class":148},"}\n",[138,233,235,238,241,244,247,250,253,256],{"class":140,"line":234},8,[138,236,237],{"class":182},"const",[138,239,240],{"class":152}," DeptTree ",[138,242,243],{"class":148},"=",[138,245,153],{"class":246},"s2Zo4",[138,248,249],{"class":148},"\u003C",[138,251,252],{"class":186},"Dept",[138,254,255],{"class":148},">",[138,257,258],{"class":152},"()\n",[128,260,265],{"className":261,"code":262,"filename":263,"language":264,"meta":134,"style":134},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CDeptTree :data=\"depts\" node-key=\"id\">\n  \u003Ctemplate #default=\"{ data }\">\n    {{ data.label }} — {{ data.leader }} \u003C!-- data: Dept，有类型提示 -->\n  \u003C\u002Ftemplate>\n\u003C\u002FDeptTree>\n","App.vue","vue",[112,266,267,304,309,314,319],{"__ignoreMap":134},[138,268,269,271,274,277,279,281,284,287,289,292,294,296,299,301],{"class":140,"line":141},[138,270,249],{"class":148},[138,272,273],{"class":196},"DeptTree",[138,275,276],{"class":148}," :",[138,278,118],{"class":182},[138,280,243],{"class":148},[138,282,283],{"class":148},"\"",[138,285,286],{"class":152},"depts",[138,288,283],{"class":148},[138,290,291],{"class":182}," node-key",[138,293,243],{"class":148},[138,295,283],{"class":148},[138,297,298],{"class":165},"id",[138,300,283],{"class":148},[138,302,303],{"class":148},">\n",[138,305,306],{"class":140,"line":172},[138,307,308],{"class":152},"  \u003Ctemplate #default=\"{ data }\">\n",[138,310,311],{"class":140,"line":179},[138,312,313],{"class":152},"    {{ data.label }} — {{ data.leader }} \u003C!-- data: Dept，有类型提示 -->\n",[138,315,316],{"class":140,"line":193},[138,317,318],{"class":152},"  \u003C\u002Ftemplate>\n",[138,320,321,324,326],{"class":140,"line":206},[138,322,323],{"class":148},"\u003C\u002F",[138,325,273],{"class":196},[138,327,303],{"class":148},[329,330,332],"h2",{"id":331},"t-覆盖哪些位置","T 覆盖哪些位置",[108,334,335,119,337,339,340,343,344,347,348,350,351,354,355,357,358,343,361,364,365,368,369,372],{},[112,336,118],{},[112,338,122],{}," 的元素类型、",[112,341,342],{},"#default"," 与 ",[112,345,346],{},"#expand-btn"," 插槽作用域里的 ",[112,349,118],{},"、",[112,352,353],{},"node-component"," 组件的 ",[112,356,118],{}," prop、",[112,359,360],{},"filter-node-method",[112,362,363],{},"render-content"," 拿到的 ",[112,366,367],{},"node.data","。不含事件回调的第三参 ",[112,370,371],{},"nodeComponent","（那是组件实例，类型固定）。",[108,374,375,376,379,380,119,383,386,387,390,391,393,394,397,398,400],{},"ref 类型仍是 ",[112,377,378],{},"VueOkrTreeInstance","（方法入参是 ",[112,381,382],{},"TreeKey",[112,384,385],{},"TreeNodeData","，与 ",[112,388,389],{},"T"," 无关）；需要 ",[112,392,367],{}," 也收窄，就在插槽里 ",[112,395,396],{},"data as Dept"," 或用 ",[112,399,353],{},"。",[329,402,403],{"id":403},"导出的类型与值",[108,405,406,407,410],{},"从包入口一次性导出，不需要深路径 import（清单以 ",[112,408,409],{},"src\u002Flib\u002Findex.ts"," 为准）：",[412,413,414,427],"table",{},[415,416,417],"thead",{},[418,419,420,424],"tr",{},[421,422,423],"th",{},"类别",[421,425,426],{},"类型",[428,429,430,446,466,503,522],"tbody",{},[418,431,432,436],{},[433,434,435],"td",{},"组件实例",[433,437,438,350,440,350,443],{},[112,439,378],{},[112,441,442],{},"OkrTreeGroupInstance",[112,444,445],{},"OkrTreeViewportInstance",[418,447,448,451],{},[433,449,450],{},"数据与 key",[433,452,453,350,455,350,457,350,460,350,463],{},[112,454,385],{},[112,456,382],{},[112,458,459],{},"TreeDirection",[112,461,462],{},"TreeOptionProps",[112,464,465],{},"TreeStoreOptions",[418,467,468,471],{},[433,469,470],{},"回调与渲染",[433,472,473,350,476,350,479,350,482,350,485,350,488,350,491,350,494,350,497,350,500],{},[112,474,475],{},"TreeLoadFunction",[112,477,478],{},"FilterNodeMethod",[112,480,481],{},"RenderContentFunction",[112,483,484],{},"NodeBtnContentFunction",[112,486,487],{},"LabelClassName",[112,489,490],{},"ExpandBtnSlotScope",[112,492,493],{},"ScrollToNodeOptions",[112,495,496],{},"TreeCheckInfo",[112,498,499],{},"DropType",[112,501,502],{},"TypedOkrTreeSlots\u003CT>",[418,504,505,508],{},[433,506,507],{},"外观",[433,509,510,350,513,350,516,350,519],{},[112,511,512],{},"AnimateName",[112,514,515],{},"TreeTheme",[112,517,518],{},"ConnectorMode",[112,520,521],{},"ConnectorShape",[418,523,524,527],{},[433,525,526],{},"画布",[433,528,529,350,532,350,535],{},[112,530,531],{},"ExportImageOptions",[112,533,534],{},"ViewportOffset",[112,536,537],{},"ViewportWheelBehavior",[108,539,540,541,543,544,547,548,350,551,350,554,350,557,560,561,119,564,119,567,570,571,119,574,119,577,350,580,583,584,119,587,119,590,119,593,596],{},"导出的值：",[112,542,114],{},"（= ",[112,545,546],{},"OkrTree","）、",[112,549,550],{},"OkrTreeGroup",[112,552,553],{},"OkrTreeViewport",[112,555,556],{},"createTypedOkrTree",[112,558,559],{},"VueOkrTreePlugin","（也是默认导出）、",[112,562,563],{},"TreeNode",[112,565,566],{},"TreeStore",[112,568,569],{},"createNode","（模型层）、",[112,572,573],{},"NODE_KEY",[112,575,576],{},"getNodeKey",[112,578,579],{},"markNodeData",[112,581,582],{},"BUILT_IN_THEMES","、以及画布纯函数 ",[112,585,586],{},"clampZoom",[112,588,589],{},"computeFit",[112,591,592],{},"renderToDataUrl",[112,594,595],{},"loadHtmlToImage","（便于自绘工具栏与单测）。",[108,598,599,601,602,605,606,400],{},[112,600,573],{}," 是写在源数据上的那个不可枚举字段名（",[112,603,604],{},"'$treeNodeId'","），做持久化或调试时会用，见",[607,608,35],"a",{"href":36},[610,611,612],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":134,"searchDepth":172,"depth":172,"links":614},[615,616],{"id":331,"depth":172,"text":332},{"id":403,"depth":172,"text":403},"createTypedOkrTree\u003CT>() 的类型覆盖位置与导出清单","md",null,{},{"icon":28},{"title":25,"description":617},"p8gQwi8jVzZJSITcJp6wunVmIXa9BEbY1ed7sBRqIQk",[625,627],{"title":20,"path":21,"stem":22,"description":626,"icon":23,"children":-1},"按键表、漫游 tabindex 与 WAI-ARIA tree 语义",{"title":30,"path":31,"stem":32,"description":628,"icon":33,"children":-1},"开发期 OkrTree 面板：树实例列表、概要统计与节点注册表的可视化调试",1793606852962]