feat: #897 增加切换toc悬浮目录状态的api

Tencent · Nov 25, 2024 · b69bf1f · b69bf1f
1 parent 8488d1d
commit b69bf1f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/examples/api.html b/examples/api.html
@@ -249,6 +249,18 @@ <h2 class="one-api__name">setCodeBlockTheme(theme:string)</h2>
       </div>
     </div>
 
+    <div class="one-api">
+      <h2 class="one-api__name">toggleToc(focusModel:{'full'|'pure'|''})</h2>
+      <p class="one-api__desc">修改右侧悬浮目录的状态</p>
+      <div class="one-api__try">
+        <textarea id="setMarkdown" placeholder="输入内容" rows="5">
+cherryObj.toggleToc(); // 切换状态
+cherryObj.toggleToc('full'); // 强制切换到全屏状态
+cherryObj.toggleToc('pure'); // 强制切换到极简状态</textarea>
+        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
+      </div>
+    </div>
+
     <br>
     <hr>
 

diff --git a/src/Cherry.js b/src/Cherry.js
@@ -1064,4 +1064,26 @@ export default class Cherry extends CherryStatic {
     this.resetToolbar('toolbar', this.options.toolbars.toolbar || []);
     return true;
   }
+
+  /**
+   * 切换TOC的模式（极简 or 展开）
+   * @param {'full'|'pure'|''} focusModel 是否强制切换模式，如果为空，则根据当前模式切换
+   */
+  toggleToc(focusModel = '') {
+    if (!this.toc) {
+      return;
+    }
+    let targetModel = 'full';
+    if (focusModel === '') {
+      // @ts-ignore
+      const { model } = this.toc;
+      targetModel = model === 'full' ? 'pure' : 'full';
+    } else {
+      targetModel = focusModel;
+    }
+    // @ts-ignore
+    this.toc.$switchModel(targetModel);
+    // @ts-ignore
+    this.toc.setModelToLocalStorage(targetModel);
+  }
 }