如何使用 Vuetify 的组件“导航抽屉”重现此导航？

Posted 2023-02-22

【中文标题】如何使用 Vuetify 的组件“导航抽屉”重现此导航？

【英文标题】：How can I reproduce this navigation with the Vuetify's component 'navigation drawer'?

【发布时间】：2021-10-29 22:19:36

【问题描述】：

我正在使用 Vuetify 和组件 Navigation Drawer

我正在尝试重现 this 导航。

左边的菜单是固定的，即使我们调整浏览器窗口的大小，宽度也不会改变。

当我们调整大小直到断点（宽度仍然没有改变）时，菜单消失并出现一个图标按钮，可以重新打开菜单悬停内容。

这正是我想要做的，但我尝试了很多东西，但没有任何效果。

有什么帮助吗？

这是我的代码：

    <v-navigation-drawer v-model="drawer" class="nav-container d-flex">
        <div class="options">
            <li></li> //items..
        </div>
      </v-navigation-drawer>
    
      <div style="min-width: 100px; max-width: 100%;" class="d-flex flex-column flex-grow-1 flex-shrink-0">
            //content
      </div>

有没有办法只使用 Vuetify 来做到这一点？

【参考方案1】：

我认为是 CSS 问题。

<div class="container">
 <div class="left-side">
  <ul>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
  </ul>
 </div>
</div>

CSS 样式

.container 
    display: flex;
    position: static;
    transform: translate3d(0,0,0);
    width: 272px;
    min-width: 272px;
    max-width: 272px;

.container > * 
    min-width: 218px;

【讨论】：

好吧，它几乎成功了。但我还是有些问题。第一个是菜单不会动态消失，我必须按下窗口才能使其消失。第二个是，当它消失时，内容不会调整大小，有一个空白（菜单所在的位置）。我编辑了我的问题，所以你可以看到我的代码！

***.com/questions/37928998/…

forum.vuejs.org/t/how-to-use-jquery-in-vue-component/45000

我认为我们可以使用 slack 聊天框，因为几乎开发人员都在使用它。

我请了你的懒散。