feat: MarkdownEditor 组件的高度和宽度自适应

README.md

@@ -56,3 +56,9 @@ This template should help get you started developing with Tauri + Vue 3 in Vite.
 2. 使用 <Split> 分割左右面板
 3. 使用 <Tree> 树形控件渲染文件树
 4. 联动 SelectFolder、FolderTree 和 MarkdownEditor 组件
+
+## 监听并动态调整 MarkdownEditor 的高宽度
+
+1. MarkdownEditor 加载完成后，重新自适应高度
+2. 监听 Split 的数值变化，调整 MarkdownEditor 的宽度
+3. 监听窗口 resize 事件，调整 MarkdownEditor 的高度和宽度

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, onUnmounted } from "vue";
+import { ref, watch, useTemplateRef, onMounted, onUnmounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
 import MarkdownEditor from './components/MarkdownEditor.vue'
@@ -16,31 +16,39 @@ async function greet() {
 
 // 动态控制页面左右布局
 const split = ref(0.2)
+const hiddenSplitRight = ref("")
+const splitRight = useTemplateRef('splitRight')
 watch(split, (newSplit, oldSplit) => {
     // 当 split 小于某个值时，隐藏左边布局
     if (newSplit < 0.05) {
-        // TODO
+        if (hiddenSplitRight.value == "") {
+            hiddenSplitRight.value = "hidden"
+        }
+    } else {
+        if (hiddenSplitRight.value == "hidden") {
+            hiddenSplitRight.value = ""
+        }
     }
 
-    // TODO 动态调整 MarkdownEditor 的宽度
+    // 动态调整 MarkdownEditor 的宽度
-    // let width = newSplit < 0.2 ? '1400px' : '1200px'
+    const width = splitRight.value.offsetWidth
-    // markdownRef.value.resetWidth(width)
+    // 必须重新 reset 宽度。如果不执行 reset 的话，CodeMirror 内部编辑器不会自适应宽度
-    // markdownRef.value.resetHeight(window.innerHeight - 15)
+    // 可以使用 splitRight.value.offsetWidth 也可以使用 100% 来调整
+    markdownRef.value.resetWidth("100%")
 })
 
-// 监听页面宽度和高度，调整 markdown 编辑器的高宽度
+// 当编辑器初始化完成后，矫正为当前窗口的高度
-const windowWidth = ref(window.innerWidth)
+function reloadEditorHeight() {
-const windowHeight = ref(window.innerHeight)
+    markdownRef.value.resetHeight(window.innerHeight)
-const handleResize = () => {
-    windowWidth.value = window.innerWidth
-    windowHeight.value = window.innerHeight
-    // console.log(windowWidth.value)
-    // console.log(windowHeight.value)
-    markdownRef.value.resetWidth(windowWidth.value - 15)
-    markdownRef.value.resetHeight(windowHeight.value - 15)
 }
-onMounted(() => window.addEventListener('resize', handleResize))
+
-onUnmounted(() => window.removeEventListener('resize', handleResize))
+// 监听页面宽度和高度，调整 markdown 编辑器的高宽度
+const handleWindowResize = () => {
+    markdownRef.value.resetWidth("100%")
+    markdownRef.value.resetHeight(window.innerHeight)
+}
+onMounted(() => window.addEventListener('resize', handleWindowResize))
+onUnmounted(() => window.removeEventListener('resize', handleWindowResize))
 
 // <SelectFolder> 选择目录后赋值给 folderTreeData，然后再传递给 <FolderTree>
 const folderTreeData = ref(null)
@@ -80,16 +88,17 @@ async function writeFileContent() {
         <Split v-model="split">
             <template #left>
                 <div class="split-left">
-                    <SelectFolder @folder-selected="showFileTree" />
+                    <SelectFolder :class="hiddenSplitRight" @folder-selected="showFileTree" />
-                    <FolderTree :treeData="folderTreeData" @file-selected="loadFileContent" />
+                    <FolderTree :class="hiddenSplitRight" :treeData="folderTreeData" @file-selected="loadFileContent" />
                 </div>
             </template>
             <template #trigger>
                 <div class="split-trigger"></div>
             </template>
             <template #right>
-                <div class="split-right">
+                <div ref="splitRight" class="split-right">
-                    <MarkdownEditor ref="markdownRef" width='800px' height='500px' markdownCode="# hello tauri" />
+                    <MarkdownEditor ref="markdownRef" width="100%" height="100%" markdownCode="# hello tauri"
+                        :onload="reloadEditorHeight" />
                 </div>
             </template>
         </Split>
@@ -119,5 +128,13 @@ body {
 .split-trigger:hover {
     cursor: ew-resize;
 }
+
+.split-right {
+    margin-left: 5px;
+}
+
+.hidden {
+    display: none;
+}
 </style>
 <style></style>