vue.js - 如何像 VSCode 一样在 ElectronJS 中添加底栏？

问题描述

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

不幸的是，当内容溢出时，右侧似乎总是有一个小空间出现滚动条（~~我不想禁用滚动条/行为，例如overflow: hidden;~~ See Edit 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>

PS 我将 ElectronJS 与 VueJS+VuetifyJS 一起使用 - 我按照此处所述进行设置。任何帮助表示赞赏。

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

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

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

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

标签： vue.jselectronvuetify.js

vue.js - 如何像 VSCode 一样在 ElectronJS 中添加底栏？

问题描述

解决方案

推荐阅读