[{"data":1,"prerenderedAt":571},["ShallowReactive",2],{"navigation_docs":3,"-guide-controlled":102,"-guide-controlled-surround":566},[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":54,"body":104,"description":559,"extension":560,"links":561,"meta":562,"navigation":563,"path":55,"seo":564,"stem":56,"__hash__":565},"docs\u002F1.guide\u002F4.controlled.md",{"type":105,"value":106,"toc":554},"minimark",[107,111,183,199,213,217,223,472,500,503,550],[108,109,110],"h2",{"id":110},"判定规则",[112,113,114,127],"table",{},[115,116,117],"thead",{},[118,119,120,124],"tr",{},[121,122,123],"th",{},"写法",[121,125,126],{},"结果",[128,129,130,151,169],"tbody",{},[118,131,132,144],{},[133,134,135,136,140,141],"td",{},"不传 ",[137,138,139],"code",{},"expanded-keys"," \u002F ",[137,142,143],{},"current-key",[133,145,146,147,150],{},"非受控，组件自己管状态，",[137,148,149],{},"default-*"," 决定初始值",[118,152,153,162],{},[133,154,155,156,140,159],{},"传 ",[137,157,158],{},"v-model:expanded-keys",[137,160,161],{},"v-model:current-key",[133,163,164,165,168],{},"受控：值即状态，用户操作通过 ",[137,166,167],{},"update:*"," 回写，你改回去就生效",[118,170,171,176],{},[133,172,173,174],{},"只传值、不监听 ",[137,175,167],{},[133,177,178,182],{},[179,180,181],"strong",{},"锁定态","：用户点 ± 或选节点看起来没反应，外部改值仍生效",[184,185,186,187,190,191,194,195,198],"p",{},"受控与判定都只看 ",[137,188,189],{},"!== undefined","（",[137,192,193],{},"OkrTree.vue:394-395","），所以传空数组就是「全部收起」而不是「不干预」。两者都需要 ",[137,196,197],{},"node-key","。",[184,200,201,202,205,206,209,210,198],{},"非受控下 ",[137,203,204],{},"default-expanded-keys"," 与 ",[137,207,208],{},"default-checked-keys"," 的运行时语义不同（一个只追加、一个先清空再应用），见",[211,212,35],"a",{"href":36},[108,214,216],{"id":215},"通过-ref-调方法","通过 ref 调方法",[218,219,220],"docs-demo",{},[221,222],"demo-controlled-ref",{},[224,225,231],"pre",{"className":226,"code":227,"filename":228,"language":229,"meta":230,"style":230},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VueOkrTree, type VueOkrTreeInstance, type TreeKey } from 'vue3-okr-tree'\n\nconst tree = ref\u003CVueOkrTreeInstance | null>(null)\nconst expandedKeys = ref\u003CTreeKey[]>([1])\n\ntree.value?.expandAll()\ntree.value?.scrollToNode(8) \u002F\u002F Promise\u003Cboolean>，先展开祖先再滚动\n\u003C\u002Fscript>\n","App.vue","vue","",[137,232,233,268,296,333,340,378,410,415,436,462],{"__ignoreMap":230},[234,235,238,242,246,250,253,256,259,263,265],"span",{"class":236,"line":237},"line",1,[234,239,241],{"class":240},"sMK4o","\u003C",[234,243,245],{"class":244},"swJcz","script",[234,247,249],{"class":248},"spNyl"," setup",[234,251,252],{"class":248}," lang",[234,254,255],{"class":240},"=",[234,257,258],{"class":240},"\"",[234,260,262],{"class":261},"sfazB","ts",[234,264,258],{"class":240},[234,266,267],{"class":240},">\n",[234,269,271,275,278,282,285,288,291,293],{"class":236,"line":270},2,[234,272,274],{"class":273},"s7zQu","import",[234,276,277],{"class":240}," {",[234,279,281],{"class":280},"sTEyZ"," ref",[234,283,284],{"class":240}," }",[234,286,287],{"class":273}," from",[234,289,290],{"class":240}," '",[234,292,229],{"class":261},[234,294,295],{"class":240},"'\n",[234,297,299,301,303,306,309,312,315,317,319,322,324,326,328,331],{"class":236,"line":298},3,[234,300,274],{"class":273},[234,302,277],{"class":240},[234,304,305],{"class":280}," VueOkrTree",[234,307,308],{"class":240},",",[234,310,311],{"class":273}," type",[234,313,314],{"class":280}," VueOkrTreeInstance",[234,316,308],{"class":240},[234,318,311],{"class":273},[234,320,321],{"class":280}," TreeKey",[234,323,284],{"class":240},[234,325,287],{"class":273},[234,327,290],{"class":240},[234,329,330],{"class":261},"vue3-okr-tree",[234,332,295],{"class":240},[234,334,336],{"class":236,"line":335},4,[234,337,339],{"emptyLinePlaceholder":338},true,"\n",[234,341,343,346,349,351,354,356,360,363,366,369,372,375],{"class":236,"line":342},5,[234,344,345],{"class":248},"const",[234,347,348],{"class":280}," tree ",[234,350,255],{"class":240},[234,352,281],{"class":353},"s2Zo4",[234,355,241],{"class":240},[234,357,359],{"class":358},"sBMFI","VueOkrTreeInstance",[234,361,362],{"class":240}," |",[234,364,365],{"class":358}," null",[234,367,368],{"class":240},">",[234,370,371],{"class":280},"(",[234,373,374],{"class":240},"null",[234,376,377],{"class":280},")\n",[234,379,381,383,386,388,390,392,395,398,400,403,407],{"class":236,"line":380},6,[234,382,345],{"class":248},[234,384,385],{"class":280}," expandedKeys ",[234,387,255],{"class":240},[234,389,281],{"class":353},[234,391,241],{"class":240},[234,393,394],{"class":358},"TreeKey",[234,396,397],{"class":280},"[]",[234,399,368],{"class":240},[234,401,402],{"class":280},"([",[234,404,406],{"class":405},"sbssI","1",[234,408,409],{"class":280},"])\n",[234,411,413],{"class":236,"line":412},7,[234,414,339],{"emptyLinePlaceholder":338},[234,416,418,421,424,427,430,433],{"class":236,"line":417},8,[234,419,420],{"class":280},"tree",[234,422,423],{"class":240},".",[234,425,426],{"class":280},"value",[234,428,429],{"class":240},"?.",[234,431,432],{"class":353},"expandAll",[234,434,435],{"class":280},"()\n",[234,437,439,441,443,445,447,450,452,455,458],{"class":236,"line":438},9,[234,440,420],{"class":280},[234,442,423],{"class":240},[234,444,426],{"class":280},[234,446,429],{"class":240},[234,448,449],{"class":353},"scrollToNode",[234,451,371],{"class":280},[234,453,454],{"class":405},"8",[234,456,457],{"class":280},") ",[234,459,461],{"class":460},"sHwdD","\u002F\u002F Promise\u003Cboolean>，先展开祖先再滚动\n",[234,463,465,468,470],{"class":236,"line":464},10,[234,466,467],{"class":240},"\u003C\u002F",[234,469,245],{"class":244},[234,471,267],{"class":240},[184,473,474,475,478,479,140,482,140,485,140,488,140,491,494,495,497,498,198],{},"定位类入参普遍接受",[179,476,477],{},"三种形态","：key、data 对象、内部 Node 实例（",[137,480,481],{},"getNode",[137,483,484],{},"setCurrentKey",[137,486,487],{},"expandNode",[137,489,490],{},"remove",[137,492,493],{},"moveNode"," 等）。未配 ",[137,496,197],{}," 时只有 Node 实例这一路可用，见",[211,499,35],{"href":36},[108,501,502],{"id":502},"事件回调",[184,504,505,140,508,140,511,140,514,517,518,140,521,524,525,140,528,531,532,535,536,539,540,542,543,546,547,198],{},[137,506,507],{},"node-click",[137,509,510],{},"node-expand",[137,512,513],{},"node-collapse",[137,515,516],{},"node-contextmenu"," 四个基础事件，加 ",[137,519,520],{},"check",[137,522,523],{},"check-change","（复选框）与六个拖拽事件，再加两个受控回写 ",[137,526,527],{},"update:expandedKeys",[137,529,530],{},"update:currentKey","。回调里的 ",[137,533,534],{},"node"," 一律是内部 Node 实例（源数据在 ",[137,537,538],{},"node.data","），不是源数据对象；",[137,541,516],{}," 只有在你绑了它之后才阻止浏览器默认菜单。逐个签名见 ",[211,544,88],{"href":545},"\u002Fapi\u002F","，用例见 ",[211,548,549],{"href":46},"Demo 总览",[551,552,553],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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":230,"searchDepth":270,"depth":270,"links":555},[556,557,558],{"id":110,"depth":270,"text":110},{"id":215,"depth":270,"text":216},{"id":502,"depth":270,"text":502},"受控\u002F非受控的判定规则、通过 ref 调用的方法与事件回调签名","md",null,{},{"icon":57},{"title":54,"description":559},"Zb7_loH7WOickAFV4FznVdJatjtCHu9TggjAwZxtqtM",[567,569],{"title":49,"path":50,"stem":51,"description":568,"icon":52,"children":-1},"「#default 插槽 \u002F node-component \u002F render-content」三种自定义节点内容的写法与优先级",{"title":59,"path":60,"stem":61,"description":570,"icon":62,"children":-1},"复选框联动与半选语义、拖拽三分区放置判定与 allow-drag \u002F allow-drop 钩子",1793606852962]