跳转至

001-VUE组件的动态显示

编辑器的模式切换，实际上这里比较简单的，就是实现VUE组件的动态显示。

TypeScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
  <!-- 左侧区域导航，固定宽度，放置图标，鼠标悬停显示详细信息 -->
  <div id="navi-tab" class="navi-tab" :style="{ width: naviTabWidth }">
    <NaviTab @update:navi:tab="onSwitchNaviTab" />
  </div>
  <!-- 中间资源管理显示区域，宽度可以调节 -->
  <div
    v-show="isShowResourceMgrArea"
    id="resource-manager"
    class="resource-manager"
    :style="{ width: resMgrWidth }"
  >
    <ResManager :navi-show="naviResManagerShow" />
  </div>
  <!-- 资源管理器和编辑区域的宽度调节条 -->
  <div
    id="resizer-main"
    class="resizer-main"
    :style="{ left: resizerLeft }"
    @mousedown="startCursorPosition($event)"
  ></div>
  <!-- 右侧编辑区域 -->
  <div
    v-show="isShowMdContainer"
    id="md-container"
    class="md-container"
    :style="{ width: workAreaWidth }"
  >
    <MdContainer :md-container-width="workAreaWidth" />
  </div>
  <div
    v-show="isShowPluginsContainer"
    id="plugin-containers"
    class="plugin-containers"
    :style="{ width: workAreaWidth }"
  >
    <PluginTools :plugins-area-width="workAreaWidth" />
  </div>
  <div
    v-show="isShowToolsContainer"
    id="tool-containers"
    class="tool-containers"
    :style="{ width: workAreaWidth }"
  >
    <HemyTools :plugins-area-width="workAreaWidth" />
  </div>
</template>


<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import EventBus from '../../event-bus'
import NaviTab from './NaviTab.vue'
import ResManager from '../ResourceManager/ResourceManager.vue'
import MdContainer from '../Markdown/MarkdownContainer.vue'
import PluginTools from '../PluginTools/PluginTools.vue'
import HemyTools from '../HemyTools/HemyTools.vue'

// 使用 ref 来创建响应式引用
const naviResManagerShow = ref('file-explorer')
const windowWidth = ref(window.innerWidth)
const resMgrWidth = ref('300px')
const naviTabWidth = ref('40px')
const isShowResourceMgrArea = ref(true)
const isShowMdContainer = ref(true)
const isShowPluginsContainer = ref(false)
const isShowToolsContainer = ref(false)

利用VUE的ref特性和v-show，定义一个响应式变量，通过变量值的变革，来动态控制v-show的值为true或者false。进而控制对应组件的显示和隐藏。

菜单项的操作，实际就是在主进程给渲染进程发送消息，来变更对应组件的v-show的值。达到控制编辑模式的变更。

行号的显示和隐藏比较特殊，这个需要修改monaco-editor的配置项来显示和隐藏行号。