关于 javascript:Toggle v-navigation-drawer\\’s expa

沃梦达教程前端开发

2022-09-15

Toggle v-navigation-drawer's expand-on-hover not resizing content我想为我的 v-navigation-drawer 实现一个pin功能，即在按下按钮时在迷你版本和普通版本...

我想为我的 v-navigation-drawer 实现一个"pin"功能，即在按下按钮时在迷你版本和普通版本之间切换，但保留展开时悬停功能。

我试过这样：

1 2	<v-navigation-drawer app :expand-on-hover="!navBarPinned" permanent clipped width="300"> ...

我的按钮会像这样切换它：

1
2
3

<v-btn icon @click="navBarPinned = !navBarPinned">
<v-icon>mdi-pin</v-icon>
</v-btn>

这种作品，按第一个按钮，导航抽屉一直打开，内容向右移动。但是在第二次按下按钮时(再次使用迷你变体)，内容不会移回左侧，这意味着屏幕左侧有一些空间。

如何实现内容再次调整？

代码笔

通过更改我的导航抽屉的键来修复它，这会强制重新渲染导航抽屉组件：

1 2	<v-navigation-drawer app :key="navDrawerPinned" :expand-on-hover="!navDrawerPinned" permanent clipped width="300"> ...

本文标题为：关于 javascript:Toggle v-navigation-drawer\\’s expa

上一篇：关于 vuejs2:\\”TypeError: Cannot read property \\