[{"data":1,"prerenderedAt":558},["ShallowReactive",2],{"navigation_docs":3,"-guide-interaction":102,"-guide-interaction-surround":553},[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":59,"body":104,"description":546,"extension":547,"links":548,"meta":549,"navigation":550,"path":60,"seo":551,"stem":61,"__hash__":552},"docs\u002F1.guide\u002F5.interaction.md",{"type":105,"value":106,"toc":540},"minimark",[107,111,115,188,194,197,264,320,331,334,401,406,520,523,536],[108,109,110],"p",{},"两块 1.9.0 \u002F 1.10.0 加入的交互能力，语义都对齐 el-tree 的使用习惯。",[112,113,114],"h2",{"id":114},"复选框选择",[116,117,123],"pre",{"className":118,"code":119,"filename":120,"language":121,"meta":122,"style":122},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cvue-okr-tree :data=\"data\" node-key=\"id\" show-checkbox default-checked-keys=\"[3]\" \u002F>\n","App.vue","vue","",[124,125,126],"code",{"__ignoreMap":122},[127,128,131,135,139,142,146,149,152,155,157,160,162,164,168,170,173,176,178,180,183,185],"span",{"class":129,"line":130},"line",1,[127,132,134],{"class":133},"sMK4o","\u003C",[127,136,138],{"class":137},"swJcz","vue-okr-tree",[127,140,141],{"class":133}," :",[127,143,145],{"class":144},"spNyl","data",[127,147,148],{"class":133},"=",[127,150,151],{"class":133},"\"",[127,153,145],{"class":154},"sTEyZ",[127,156,151],{"class":133},[127,158,159],{"class":144}," node-key",[127,161,148],{"class":133},[127,163,151],{"class":133},[127,165,167],{"class":166},"sfazB","id",[127,169,151],{"class":133},[127,171,172],{"class":144}," show-checkbox",[127,174,175],{"class":144}," default-checked-keys",[127,177,148],{"class":133},[127,179,151],{"class":133},[127,181,182],{"class":166},"[3]",[127,184,151],{"class":133},[127,186,187],{"class":133}," \u002F>\n",[189,190,191],"docs-demo",{},[192,193],"demo-checkbox",{},[108,195,196],{},"联动规则：",[198,199,200,216,222,243,258],"ul",{},[201,202,203,204,208,209,212,213,215],"li",{},"勾选父节点向下联动",[205,206,207],"strong",{},"全部后代","（含 ",[124,210,211],{},"disabled"," 节点——",[124,214,211],{}," 只阻止直接点击），祖先按子树重算全选 \u002F 半选。「全部子节点选中 ⇒ 父选中」，所以唯一子链选中会让父节点直接变全选。",[201,217,218,221],{},[124,219,220],{},"check-strictly"," 关闭联动，勾选只作用于自身；运行时切换后新交互按新模式执行。",[201,223,224,227,228,231,232,235,236,238,239,242],{},[124,225,226],{},"default-checked-keys"," 需配 ",[124,229,230],{},"node-key","，创建期生效；运行时",[205,233,234],{},"内容","变更会先清空再按新列表应用（宿主只是换了个等值数组引用时不重放，不会把用户改过的勾选抹回去），",[124,237,145],{}," 重建后不恢复（与 ",[124,240,241],{},"default-expanded-keys"," 一致）。",[201,244,245,246,249,250,253,254,257],{},"OKR 模式下左右两树的勾选",[205,247,248],{},"独立维护","（点击只作用于所在树），而 ",[124,251,252],{},"setCheckedKeys"," \u002F ",[124,255,256],{},"getCheckedKeys"," 等按 key 对两树同时生效 \u002F 合并去重。",[201,259,260,261,263],{},"勾选态在增删子节点、懒加载 resolve、",[124,262,145],{}," 增量重建后自动重算祖先。",[108,265,266,267,270,271,274,275,278,279,281,282,253,284,253,287,253,289,253,292,253,295,298,299,302,303,306,307,310,311,314,315,319],{},"事件与方法：",[124,268,269],{},"check"," 只在",[205,272,273],{},"点击复选框","时触发（携带全量勾选信息），",[124,276,277],{},"check-change"," 在每个状态变化的节点各触发一次（联动、",[124,280,252],{}," 批量、增删级联都覆盖）。方法为 ",[124,283,256],{},[124,285,286],{},"getCheckedNodes",[124,288,252],{},[124,290,291],{},"getHalfCheckedKeys",[124,293,294],{},"getHalfCheckedNodes",[124,296,297],{},"isChecked","。键盘 ",[124,300,301],{},"Space"," 切换勾选、",[124,304,305],{},"Enter"," 选中；treeitem 输出 ",[124,308,309],{},"aria-checked","，半选为 ",[124,312,313],{},"mixed","（见",[316,317,318],"a",{"href":21},"键盘导航","）。",[108,321,322,323,326,327,330],{},"样式复用既有变量（边框取 ",[124,324,325],{},"--okr-line-color","、填充取 ",[124,328,329],{},"--okr-current-bg","），六套主题与自定义主题零配置适配。",[112,332,333],{"id":333},"拖拽调整层级",[116,335,337],{"className":118,"code":336,"filename":120,"language":121,"meta":122,"style":122},"\u003Cvue-okr-tree :data=\"data\" node-key=\"id\" draggable :allow-drop=\"allowDrop\" @node-drop=\"onDrop\" \u002F>\n",[124,338,339],{"__ignoreMap":122},[127,340,341,343,345,347,349,351,353,355,357,359,361,363,365,367,370,372,375,377,379,382,384,387,390,392,394,397,399],{"class":129,"line":130},[127,342,134],{"class":133},[127,344,138],{"class":137},[127,346,141],{"class":133},[127,348,145],{"class":144},[127,350,148],{"class":133},[127,352,151],{"class":133},[127,354,145],{"class":154},[127,356,151],{"class":133},[127,358,159],{"class":144},[127,360,148],{"class":133},[127,362,151],{"class":133},[127,364,167],{"class":166},[127,366,151],{"class":133},[127,368,369],{"class":144}," draggable",[127,371,141],{"class":133},[127,373,374],{"class":144},"allow-drop",[127,376,148],{"class":133},[127,378,151],{"class":133},[127,380,381],{"class":154},"allowDrop",[127,383,151],{"class":133},[127,385,386],{"class":133}," @",[127,388,389],{"class":144},"node-drop",[127,391,148],{"class":133},[127,393,151],{"class":133},[127,395,396],{"class":154},"onDrop",[127,398,151],{"class":133},[127,400,187],{"class":133},[189,402,403],{},[404,405],"demo-draggable",{},[198,407,408,427,448,457,475,503],{},[201,409,410,411,414,415,418,419,422,423,426],{},"放置分区为 25% \u002F 50% \u002F 25%，并",[205,412,413],{},"按布局方向换轴","：",[124,416,417],{},"horizontal","（同级上下排列）按 Y 轴 prev 上 \u002F inner 中 \u002F next 下；",[124,420,421],{},"vertical","（同级左右排列）按 X 轴 prev 左 \u002F inner 中 \u002F next 右。指示线画在节点卡片上（prev \u002F next 指示线、inner 虚线描边），颜色用 ",[124,424,425],{},"--okr-drop-color"," 定制。",[201,428,429,430,433,434,253,437,440,441,443,444,447],{},"移动同步修改源数据的 ",[124,431,432],{},"children","（与 ",[124,435,436],{},"append",[124,438,439],{},"remove"," 同一套语义，冻结数据下跳过写入并警告，见",[316,442,35],{"href":36},"），并修正整棵子树的 ",[124,445,446],{},"level"," 与节点注册表；inner 放置时目标自动展开。",[201,449,450,451,453,454,456],{},"硬性规则：不可拖到自身或自己的子树内（",[124,452,374],{}," 越不过这条），",[124,455,211],{}," 节点不可拖。",[201,458,459,460,463,464,466,467,470,471,474],{},"OKR 模式跨左右树",[205,461,462],{},"默认禁止","；",[124,465,374],{}," 明确返回 ",[124,468,469],{},"true"," 才放开，放开后整棵子树的 ",[124,472,473],{},"isLeftChild"," 标记与左右注册表随之迁移。",[201,476,477,478,481,482,481,485,481,488,491,492,494,495,498,499,502],{},"六个事件：",[124,479,480],{},"node-drag-start(node, event)","、",[124,483,484],{},"node-drag-enter \u002F leave \u002F over(draggingNode, dropNode, event)",[124,486,487],{},"node-drag-end(draggingNode, dropNode | null, dropType | null, event)",[124,489,490],{},"node-drop(draggingNode, dropNode, dropType, event)","。未完成放置时 ",[124,493,389],{}," 不触发、",[124,496,497],{},"node-drag-end"," 的后两参为 ",[124,500,501],{},"null","。",[201,504,505,506,509,510,513,514,253,516,519],{},"不用鼠标也能改层级：",[124,507,508],{},"moveNode(data, target, type)"," 与拖拽走同一条 ",[124,511,512],{},"moveNode"," 路径，",[124,515,145],{},[124,517,518],{},"target"," 均接受 key、data 对象或 Node 实例。",[112,521,522],{"id":522},"相关页面",[198,524,525,531],{},[201,526,527,528],{},"连接线的外观与两种渲染模式：",[316,529,83],{"href":530},"\u002Ftheme\u002F",[201,532,533,534],{},"命令式增删改：",[316,535,54],{"href":55},[537,538,539],"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 .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 .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":122,"searchDepth":541,"depth":541,"links":542},2,[543,544,545],{"id":114,"depth":541,"text":114},{"id":333,"depth":541,"text":333},{"id":522,"depth":541,"text":522},"复选框联动与半选语义、拖拽三分区放置判定与 allow-drag \u002F allow-drop 钩子","md",null,{},{"icon":62},{"title":59,"description":546},"IMdZlvAcf9TGMDQ4O1HFvYGL6o-DMVzQYqhsnO_62u4",[554,556],{"title":54,"path":55,"stem":56,"description":555,"icon":57,"children":-1},"受控\u002F非受控的判定规则、通过 ref 调用的方法与事件回调签名",{"title":64,"path":65,"stem":66,"description":557,"icon":67,"children":-1},"lazy + load 懒加载的行为约定：isLeaf 叶子标记、失败重试与加载中状态",1790437329080]