[{"data":1,"prerenderedAt":647},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fzh\u002Fadvanced\u002Finteractions":92,"docs-navigation:zh":624},[4,8,12,16,34,38,47],{"title":5,"path":6,"stem":7},"Getting Started","\u002Fgetting-started","2.getting-started",{"title":9,"path":10,"stem":11},"Writing Diagrams","\u002Fwriting-diagrams","3.writing-diagrams",{"title":13,"path":14,"stem":15},"Configuration","\u002Fconfiguration","4.configuration",{"title":17,"path":18,"stem":19,"children":20,"page":33},"Advanced","\u002Fadvanced","5.advanced",[21,25,29],{"title":22,"path":23,"stem":24},"Themes and Styling","\u002Fadvanced\u002Fthemes-and-styling","5.advanced\u002F1.themes-and-styling",{"title":26,"path":27,"stem":28},"Custom Rendering","\u002Fadvanced\u002Fcustom-rendering","5.advanced\u002F2.custom-rendering",{"title":30,"path":31,"stem":32},"Interactions","\u002Fadvanced\u002Finteractions","5.advanced\u002F3.interactions",false,{"title":35,"path":36,"stem":37},"Troubleshooting","\u002Ftroubleshooting","6.troubleshooting",{"title":39,"path":40,"stem":41,"children":42,"page":33},"Migration","\u002Fmigration","7.migration",[43],{"title":44,"path":45,"stem":46},"Migration to v3","\u002Fmigration\u002Fv3","7.migration\u002F1.v3",{"title":48,"path":49,"stem":50,"children":51,"page":33},"Zh","\u002Fzh","zh",[52,56,60,64,80,84],{"title":53,"path":54,"stem":55},"開始使用","\u002Fzh\u002Fgetting-started","zh\u002F2.getting-started",{"title":57,"path":58,"stem":59},"撰寫圖表","\u002Fzh\u002Fwriting-diagrams","zh\u002F3.writing-diagrams",{"title":61,"path":62,"stem":63},"設定","\u002Fzh\u002Fconfiguration","zh\u002F4.configuration",{"title":17,"path":65,"stem":66,"children":67,"page":33},"\u002Fzh\u002Fadvanced","zh\u002F5.advanced",[68,72,76],{"title":69,"path":70,"stem":71},"主題與樣式","\u002Fzh\u002Fadvanced\u002Fthemes-and-styling","zh\u002F5.advanced\u002F1.themes-and-styling",{"title":73,"path":74,"stem":75},"自訂渲染","\u002Fzh\u002Fadvanced\u002Fcustom-rendering","zh\u002F5.advanced\u002F2.custom-rendering",{"title":77,"path":78,"stem":79},"互動","\u002Fzh\u002Fadvanced\u002Finteractions","zh\u002F5.advanced\u002F3.interactions",{"title":81,"path":82,"stem":83},"疑難排解","\u002Fzh\u002Ftroubleshooting","zh\u002F6.troubleshooting",{"title":39,"path":85,"stem":86,"children":87,"page":33},"\u002Fzh\u002Fmigration","zh\u002F7.migration",[88],{"title":89,"path":90,"stem":91},"升級至 v3","\u002Fzh\u002Fmigration\u002Fv3","zh\u002F7.migration\u002F1.v3",{"id":93,"title":77,"body":94,"config":617,"description":618,"extension":619,"meta":620,"navigation":621,"path":78,"seo":622,"stem":79,"__hash__":623},"docs\u002Fzh\u002F5.advanced\u002F3.interactions.md",{"type":95,"value":96,"toc":611},"minimark",[97,100,113,117,120,262,290,301,304,310,433,449,455,458,461,464,575,586,589,592,607],[98,99,77],"h1",{"id":77},[101,102,103,104,107,108,112],"p",{},"內建渲染器提供複製原始碼、瀏覽器全螢幕、展開覆蓋層與縮放／平移控制項。",[105,106],"br",{},"\n已成功解析的",[109,110,111],"a",{"href":74},"自訂渲染器","會將它們全部取代，因此本頁只適用內建渲染器。",[114,115,116],"h2",{"id":116},"選擇可見的工具列控制項",[101,118,119],{},"工具列會顯示在每張內建圖表上方。預設會啟用標題與控制項：",[121,122,127],"pre",{"className":123,"code":124,"language":125,"meta":126,"style":126},"language-ts shiki shiki-themes github-light github-dark-high-contrast","export default defineNuxtConfig({\n  contentMermaid: {\n    toolbar: {\n      title: 'Architecture',\n      fontSize: '14px',\n      fullscreenToolbarScale: 1.25,\n      buttons: {\n        copy: true,\n        fullscreen: true,\n        expand: true,\n      },\n    },\n  },\n})\n","ts","",[128,129,130,150,157,163,176,187,199,205,216,226,236,242,248,256],"code",{"__ignoreMap":126},[131,132,135,139,142,146],"span",{"class":133,"line":134},"line",1,[131,136,138],{"class":137},"s-kum","export",[131,140,141],{"class":137}," default",[131,143,145],{"class":144},"s_Opv"," defineNuxtConfig",[131,147,149],{"class":148},"sjV9Q","({\n",[131,151,153],{"class":133,"line":152},2,[131,154,156],{"class":155},"skGVy","  contentMermaid: {\n",[131,158,160],{"class":133,"line":159},3,[131,161,162],{"class":155},"    toolbar: {\n",[131,164,166,169,173],{"class":133,"line":165},4,[131,167,168],{"class":155},"      title: ",[131,170,172],{"class":171},"srMev","'Architecture'",[131,174,175],{"class":155},",\n",[131,177,179,182,185],{"class":133,"line":178},5,[131,180,181],{"class":155},"      fontSize: ",[131,183,184],{"class":171},"'14px'",[131,186,175],{"class":155},[131,188,190,193,197],{"class":133,"line":189},6,[131,191,192],{"class":155},"      fullscreenToolbarScale: ",[131,194,196],{"class":195},"sP0c6","1.25",[131,198,175],{"class":155},[131,200,202],{"class":133,"line":201},7,[131,203,204],{"class":155},"      buttons: {\n",[131,206,208,211,214],{"class":133,"line":207},8,[131,209,210],{"class":155},"        copy: ",[131,212,213],{"class":195},"true",[131,215,175],{"class":155},[131,217,219,222,224],{"class":133,"line":218},9,[131,220,221],{"class":155},"        fullscreen: ",[131,223,213],{"class":195},[131,225,175],{"class":155},[131,227,229,232,234],{"class":133,"line":228},10,[131,230,231],{"class":155},"        expand: ",[131,233,213],{"class":195},[131,235,175],{"class":155},[131,237,239],{"class":133,"line":238},11,[131,240,241],{"class":155},"      },\n",[131,243,245],{"class":133,"line":244},12,[131,246,247],{"class":155},"    },\n",[131,249,251,254],{"class":133,"line":250},13,[131,252,253],{"class":155},"  }",[131,255,175],{"class":148},[131,257,259],{"class":133,"line":258},14,[131,260,261],{"class":148},"})\n",[101,263,264,267,268,270,271,274,275,278,279,281,282,285,286,289],{},[128,265,266],{},"copy"," 會複製 Mermaid 原始碼。",[105,269],{},"\n嘗試後，按鈕標題與可存取標籤會暫時顯示 ",[128,272,273],{},"Copied"," 或 ",[128,276,277],{},"Copy failed","；渲染器會先使用 Clipboard API，接著嘗試瀏覽器的舊式複製備援方式。",[105,280],{},"\n只有瀏覽器支援 Fullscreen API 時才顯示 ",[128,283,284],{},"fullscreen","。",[128,287,288],{},"expand"," 會開啟頁內覆蓋層。",[101,291,292,293,296,297,300],{},"將按鈕設為 ",[128,294,295],{},"false"," 可隱藏它。隱藏 expand 按鈕不會停用點擊圖表來開啟覆蓋層；請用 ",[128,298,299],{},"expand.invokeOpenOn.diagramClick"," 個別控制。",[114,302,303],{"id":303},"設定開啟與關閉",[101,305,306,307,309],{},"預設會啟用 ",[128,308,288],{},"。其關閉控制項可分別設定：",[121,311,313],{"className":123,"code":312,"language":125,"meta":126,"style":126},"export default defineNuxtConfig({\n  contentMermaid: {\n    expand: {\n      margin: 24,\n      invokeOpenOn: {\n        diagramClick: true,\n      },\n      invokeCloseOn: {\n        esc: true,\n        wheel: true,\n        swipe: true,\n        overlayClick: true,\n        closeButtonClick: true,\n      },\n    },\n  },\n})\n",[128,314,315,325,329,334,344,349,358,362,367,376,385,394,403,412,416,421,428],{"__ignoreMap":126},[131,316,317,319,321,323],{"class":133,"line":134},[131,318,138],{"class":137},[131,320,141],{"class":137},[131,322,145],{"class":144},[131,324,149],{"class":148},[131,326,327],{"class":133,"line":152},[131,328,156],{"class":155},[131,330,331],{"class":133,"line":159},[131,332,333],{"class":155},"    expand: {\n",[131,335,336,339,342],{"class":133,"line":165},[131,337,338],{"class":155},"      margin: ",[131,340,341],{"class":195},"24",[131,343,175],{"class":155},[131,345,346],{"class":133,"line":178},[131,347,348],{"class":155},"      invokeOpenOn: {\n",[131,350,351,354,356],{"class":133,"line":189},[131,352,353],{"class":155},"        diagramClick: ",[131,355,213],{"class":195},[131,357,175],{"class":155},[131,359,360],{"class":133,"line":201},[131,361,241],{"class":155},[131,363,364],{"class":133,"line":207},[131,365,366],{"class":155},"      invokeCloseOn: {\n",[131,368,369,372,374],{"class":133,"line":218},[131,370,371],{"class":155},"        esc: ",[131,373,213],{"class":195},[131,375,175],{"class":155},[131,377,378,381,383],{"class":133,"line":228},[131,379,380],{"class":155},"        wheel: ",[131,382,213],{"class":195},[131,384,175],{"class":155},[131,386,387,390,392],{"class":133,"line":238},[131,388,389],{"class":155},"        swipe: ",[131,391,213],{"class":195},[131,393,175],{"class":155},[131,395,396,399,401],{"class":133,"line":244},[131,397,398],{"class":155},"        overlayClick: ",[131,400,213],{"class":195},[131,402,175],{"class":155},[131,404,405,408,410],{"class":133,"line":250},[131,406,407],{"class":155},"        closeButtonClick: ",[131,409,213],{"class":195},[131,411,175],{"class":155},[131,413,414],{"class":133,"line":258},[131,415,241],{"class":155},[131,417,419],{"class":133,"line":418},15,[131,420,247],{"class":155},[131,422,424,426],{"class":133,"line":423},16,[131,425,253],{"class":155},[131,427,175],{"class":148},[131,429,431],{"class":133,"line":430},17,[131,432,261],{"class":148},[101,434,435,438,439,442,443,445,446,285],{},[128,436,437],{},"margin"," 會在展開的 SVG 周圍保留像素空間。設定 ",[128,440,441],{},"expand: false"," 可完全停用此功能。",[105,444],{},"\n布林預設組態與物件修補的差異請參閱 ",[109,447,61],{"href":448},"\u002Fzh\u002Fconfiguration#%E5%B1%95%E9%96%8B",[101,450,451,452,285],{},"完整的展開選項路徑、預設值與效果，請參閱 ",[109,453,454],{"href":448},"展開設定",[101,456,457],{},"瀏覽器全螢幕控制項依瀏覽器的一般全螢幕行為離開，不使用展開覆蓋層的關閉規則。",[114,459,460],{"id":460},"縮放與平移大型圖表",[101,462,463],{},"全螢幕與展開覆蓋層會顯示縮小、放大、百分比與重設控制項。兩種檢視都使用相同對應：",[465,466,467,480],"table",{},[468,469,470],"thead",{},[471,472,473,477],"tr",{},[474,475,476],"th",{},"輸入",[474,478,479],{},"動作",[481,482,483,492,508,522,535,545,553,560,567],"tbody",{},[471,484,485,489],{},[486,487,488],"td",{},"縮放控制項",[486,490,491],{},"縮小、放大或重設。",[471,493,494,505],{},[486,495,496,497,500,501,504],{},"Windows\u002FLinux 的 ",[128,498,499],{},"Ctrl"," + 滾輪，或 macOS 的 ",[128,502,503],{},"⌘"," + 滾輪",[486,506,507],{},"在指標位置縮放。",[471,509,510,519],{},[486,511,512,515,516],{},[128,513,514],{},"+"," \u002F ",[128,517,518],{},"=",[486,520,521],{},"放大。",[471,523,524,532],{},[486,525,526,515,529],{},[128,527,528],{},"-",[128,530,531],{},"_",[486,533,534],{},"縮小。",[471,536,537,542],{},[486,538,539],{},[128,540,541],{},"0",[486,543,544],{},"重設縮放與平移。",[471,546,547,550],{},[486,548,549],{},"方向鍵",[486,551,552],{},"平移圖表。",[471,554,555,558],{},[486,556,557],{},"按住 Space 並以滑鼠拖曳",[486,559,552],{},[471,561,562,565],{},[486,563,564],{},"單指觸控拖曳",[486,566,552],{},[471,568,569,572],{},[486,570,571],{},"雙指捏合",[486,573,574],{},"縮放圖表。",[101,576,577,578,274,580,582,583,585],{},"在展開覆蓋層中，於圖表上未使用修飾鍵的滾輪不會縮放；它會顯示一次性提示，提示使用 ",[128,579,499],{},[128,581,503],{}," 加上捲動。",[105,584],{},"\n在覆蓋層背景上滾輪會遵循已設定的關閉行為。捏合是圖表操作，不會視為滑動關閉手勢。",[114,587,588],{"id":588},"維持控制項可理解且可存取",[101,590,591],{},"內建控制項使用原生按鈕與可存取標籤，包括 Copy、Enter\u002FExit fullscreen、Expand\u002FCollapse diagram、Zoom In\u002FOut、Reset Zoom 與 Minimize diagram。鍵盤使用者可以操作控制項，並在圖表展開或全螢幕時使用縮放快捷鍵。",[101,593,594,595,598,599,602,603,606],{},"停用某個關閉路徑時，請提供另一個可觸及的關閉路徑。特別是同時關閉 ",[128,596,597],{},"esc","、",[128,600,601],{},"overlayClick"," 與 ",[128,604,605],{},"closeButtonClick"," 時，使用者可能沒有明顯方式離開展開檢視。取代內建渲染器時，請在自訂元件重新實作對等的標籤、鍵盤存取、焦點行為與觸控操作方式。",[608,609,610],"style",{},"html pre.shiki code .s-kum, html code.shiki .s-kum{--shiki-default:#D73A49;--shiki-dark:#FF9492}html pre.shiki code .s_Opv, html code.shiki .s_Opv{--shiki-default:#6F42C1;--shiki-dark:#DBB7FF}html pre.shiki code .sjV9Q, html code.shiki .sjV9Q{--shiki-default:#24292E;--shiki-dark:#FFB757}html pre.shiki code .skGVy, html code.shiki .skGVy{--shiki-default:#24292E;--shiki-dark:#F0F3F6}html pre.shiki code .srMev, html code.shiki .srMev{--shiki-default:#032F62;--shiki-dark:#ADDCFF}html pre.shiki code .sP0c6, html code.shiki .sP0c6{--shiki-default:#005CC5;--shiki-dark:#91CBFF}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":126,"searchDepth":152,"depth":152,"links":612},[613,614,615,616],{"id":116,"depth":152,"text":116},{"id":303,"depth":152,"text":303},{"id":460,"depth":152,"text":460},{"id":588,"depth":152,"text":588},null,"設定內建工具列、全螢幕、展開覆蓋層、縮放與可存取控制項。","md",{},true,{"title":77,"description":618},"Uo5mEciobLsRTaxABntxRK_QapNdK_1GVT3UXX6yarE",[625],{"title":48,"path":49,"stem":50,"children":626,"page":33},[627,629,631,633,641,643],{"title":53,"path":54,"stem":55,"children":628},[],{"title":57,"path":58,"stem":59,"children":630},[],{"title":61,"path":62,"stem":63,"children":632},[],{"title":17,"path":65,"stem":66,"children":634,"page":33},[635,637,639],{"title":69,"path":70,"stem":71,"children":636},[],{"title":73,"path":74,"stem":75,"children":638},[],{"title":77,"path":78,"stem":79,"children":640},[],{"title":81,"path":82,"stem":83,"children":642},[],{"title":39,"path":85,"stem":86,"children":644,"page":33},[645],{"title":89,"path":90,"stem":91,"children":646},[],1787059980834]