关于 javascript:Toggle v-navigation-drawer//’s expand-on-hover not resizing content

Toggle v-navigation-drawer’s expand-on-hover not resizing content

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

我试过这样:

1
2
<vnavigationdrawer app :expandonhover="!navBarPinned" permanent clipped width="300">

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

1
2
3
<vbtn icon @click="navBarPinned = !navBarPinned">
    <vicon>mdipin</vicon>
</vbtn>

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

如何实现内容再次调整?

代码笔


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

1
2
<vnavigationdrawer app :key="navDrawerPinned" :expandonhover="!navDrawerPinned" permanent clipped width="300">

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269190.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论