javascript - 切换 v-navigation-drawer 的悬停扩展不调整内容大小

标签 javascript html vue.js vuetify.js v-navigation-drawer

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

我尝试过这样的:

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

我的按钮像这样切换它:

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

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

如何实现内容再次调整?

Codepen

最佳答案

已修复此问题 changing the key of my navigation drawer这会强制重新渲染抽屉导航组件:

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

关于javascript - 切换 v-navigation-drawer 的悬停扩展不调整内容大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63337982/

相关文章:

javascript - Dygraphs:如何同时使用范围选择器和手动缩放

javascript - 如何在php中检查复选框的跨度是否被选中?

html - CSS :not on the parent does not work for descendant selectors but it does for child selectors, 除非您明确指定父元素类型

javascript - 如何使用 JavaScript 滚动事件更改 HTML 输入

javascript - 将属性从 v-for 添加到动态 :style in vuejs

javascript - Jquery 列表更新

javascript - 如何访问它,这是一个对象文字还是?

javascript - 如何在 JQuery 中使用appendTo() 函数显示此小部件?

javascript - 如何从Vue中创建的axios函数访问属性

javascript - 我在这个 openAI API 上做错了什么?