如何像 VSCode 一样在 ElectronJS 中添加底栏？答案

【问题标题】：How do I add a bottom bar in ElectronJS like the VSCode one?如何像 VSCode 一样在 ElectronJS 中添加底栏？
【发布时间】：2021-07-26 19:47:42
【问题描述】：

我正在尝试在我的 ElectronJS 应用程序底部添加一个栏，我希望它的定位方式与 VSCode 中的蓝色底部栏相同，滚动条在其上方结束/停止。

不幸的是，当内容溢出时，右侧似乎总是有一个小空间出现滚动条（~~我不想禁用滚动条/行为与诸如overflow: hidden;之类的东西~~ 参见编辑 2）。

我做了一些测试，通过下面的代码，您可以看到我想要的行为似乎发生在nav-drawer 上，即它的滚动条停在v-bottom-navigation 的正上方，这将是我的底栏（粗灰色线你看到的是滚动条）。

我对此并不陌生，但我无法弄清楚为什么会发生这种情况以及如何修改它以使整个应用程序具有相同的行为。

VueComponent.vue

<template>
  <div id="nav-drawer">
    <v-navigation-drawer
      v-model="drawer"
      app
      color="white darken-3"
      mini-variant
      permanent
    >
      <v-avatar
        v-for="n in 30"
        :key="n"
        :color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
        size="36"
        class="d-block text-center mx-auto my-3"
      >
        <span>TT</span>
      </v-avatar>
      <v-avatar class="d-block mx-auto">
        <v-btn icon small color="primary">
          <v-icon>fas fa-window-maximize</v-icon>
        </v-btn>
      </v-avatar>
    </v-navigation-drawer>
    <v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
      <v-spacer></v-spacer>
      <v-btn icon small>
        Button
      </v-btn>
    </v-bottom-navigation>
  </div>
</template>

<script>
export default {
  name: "NavDrawer",
  components: {
    //
  },
  data: () => ({
    drawer: true,
  })
}
</script>

附：我将 ElectronJS 与 VueJS+VuetifyJS 一起使用——我按照here 的描述进行了设置。任何帮助表示赞赏。

编辑 1： 我浏览了 VSCode 源代码并找到了 UI 元素 (vscode/src/vs/base/browser/ui/)。不幸的是，我无法弄清楚其中哪个是底部的栏（根据我在这里和那里找到的一些线程，显然称为System Bar）。

我认为它可能是toolbar，但这似乎是actionbar的一部分，它是左侧的菜单（默认情况下）并且似乎没有很多CSS 表示它是底部的栏。

编辑 2： 我尝试在 index.html 主文件的 style 部分添加 html {overflow: hidden;}。它删除了主页部分的栏（您在第二张图片中看到的带有两个箭头和绿色按钮的滚动条）和滚动的可能性，但 nav-drawer 的滚动条仍然存在，并且滚动仍然有效。所以，我想这将是一个选项，如果我仍然可以在主页部分中使用滚动条，并且上面的代码with 也启用了hidden 功能。不过不确定这是否可能。

编辑 3：在 index.html 文件中使用 html {overflow-y: auto;}，当没有溢出的内容并且看起来就像我想要的一样时删除滚动条，但是如果有，它仍然会占用空间，看起来就像我帖子中的第二张图片。

【问题讨论】：

标签： vue.js electron vuetify.js

【解决方案1】：

找到这个例子：CodePen

对于我的情况，解决方案是让:root {...} 部分适应我的应用程序，这意味着将底部栏标记为页脚并根据其大小计算内容区域。

html {overflow: hidden;} 必须也位于index.html 文件的style 部分中。

【讨论】：