Vuetify导航抽屉的怪异行为与mini-variant.sync

我的Vuetify应用程序中的v-navigation抽屉组件出现问题。当启用mini-variant.sync道具并且视口处于某个断点(在lg和md之间)时，应用程序的主要部分会出现一个奇怪的填充。我在上面包含了我的代码以供参考。

我正在使用Vuetify版本2(没有遇到任何错误消息)。我希望v-navigation-dower组件能像往常一样工作，而不会在应用程序的主要部分出现奇怪的填充。

有人能帮我理解为什么会出现这个问题，以及我如何解决它吗？如有任何见解或建议，我们将不胜感激。谢谢

请参阅此处的问题示例(点击"完整页面"链接以提高分辨率！！)

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-expand-x-transition>
<v-navigation-drawer
v-if="drawer"
:style="'background-color:yellow;'+($vuetify.breakpoint.xsOnly ? 'width:100%;': '')"
:permanent="$vuetify.breakpoint.mdAndUp" 

:mini-variant.sync="$vuetify.breakpoint.lgAndUp"
:left="$vuetify.breakpoint.mdAndUp" 
app
v-model="drawer"  
:expand-on-hover="$vuetify.breakpoint.mdAndUp" 
>  
<span style="color:white;" v-if="$vuetify.breakpoint.xsOnly||!($vuetify.breakpoint.mdAndUp)">Please increase your resolution!</span>
[content of navigation-drawer]
</v-navigation-drawer> 


</v-expand-x-transition>
<v-main style="background-color:red;">
<v-container>There is a strange padding when you enter your mouse on the navigation drawer and leave!</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
drawer:true,
},
})
</script>
</body>
</html>

编辑-

经过如此深入的检查，我终于发现了错误，如下所示-

mini-variant道具的行为类似于

Expand the drawer = mini-variant is false = drawer is no more mini
Shrink the drawer = mini-variant is true = drawer is in mini mode

但是，在您的实现中，mini-variant的值始终为true，即使在展开抽屉时也是如此(这应该会将值更改为false)。事实上，有一个眨眼的错误->true当展开抽屉时，但在最后始终保持true。

这是证据-

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-expand-x-transition>
<v-navigation-drawer
v-if="drawer"
style="background-color:blue;" :style="$vuetify.breakpoint.xsOnly ? 'width:100%;': ''"
:permanent="$vuetify.breakpoint.mdAndUp" 
:mini-variant.sync="$vuetify.breakpoint.lgAndUp"
:left="$vuetify.breakpoint.mdAndUp" 
app
v-model="drawer"  
:expand-on-hover="$vuetify.breakpoint.mdAndUp" 
>  
<span style="color:white;" v-if="$vuetify.breakpoint.xsOnly||!($vuetify.breakpoint.mdAndUp)">Please increase your resolution!</span>
[content of navigation-drawer]
</v-navigation-drawer>
</v-expand-x-transition>
<v-main style="background-color:red;">
<v-container>
mini-variant - {{ $vuetify.breakpoint.lgAndUp }}
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
drawer: true,
}
}
})
</script>
</body>
</html>

现在，错误是使用这样的迷你变体-

:mini-variant="$vuetify.breakpoint.lgAndUp"

这将始终为真，因为无论您扩展/缩小抽屉，迷你变体都直接取决于断点，这对于大型设备始终为真。这就是true -> false闪烁所指示的

Expand the drawer -> mini turns false -> realized that breakpoint condition is true -> suddenly change itself to true -> always remains true.

现在，当mini-variant设置为false一秒钟时，容器从左侧获得256px的填充，但由于没有人保存mini-variant的状态(在将其设置为true之前)，它永远不知道它是否在扩展/收缩，因此填充永远不会有机会重置为默认值，这就是为什么会产生weired填充

现在，解决方案是使用一个数据属性，它可以存储抽屉的状态，而不直接依赖于断点，这就是文档中描述的实现方式。

这是工作演示-

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-expand-x-transition>
<v-navigation-drawer
v-if="drawer"
:style="'background-color:blue;'+($vuetify.breakpoint.xsOnly ? 'width:100%;': '')"
:permanent="$vuetify.breakpoint.mdAndUp" 
:mini-variant.sync="mini"
:left="$vuetify.breakpoint.mdAndUp" 
app
v-model="drawer"  
:expand-on-hover="$vuetify.breakpoint.mdAndUp" 
>  
<span style="color:white;" v-if="$vuetify.breakpoint.xsOnly||!($vuetify.breakpoint.mdAndUp)">Please increase your resolution!</span>
[content of navigation-drawer]
</v-navigation-drawer>
</v-expand-x-transition>
<v-main style="background-color:red;">
<v-container>
mini-variant - {{ mini }}
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
drawer: true,
mini: this.$vuetify.breakpoint.lgAndUp
}
}
})
</script>
</body>
</html>

编辑-

相关内容

最新更新

热门标签：