我的Vuetify应用程序中的v-navigation-drawer组件遇到了一个问题。当启用mini-variant.sync
属性并且视口位于某个断点(lg
和md
之间)时,应用程序的主要部分会出现一个奇怪的填充。我在上面包含了我的代码以供参考。
我使用的是Vuetify版本2(没有遇到任何错误消息)。我希望v-navigation-drawer组件能正常工作,不会在应用程序的主要部分出现奇怪的填充。
有人能帮助我了解为什么会出现此问题以及如何解决此问题吗?如有任何见解或建议,我们将不胜感激。谢谢😁
在此查看问题示例(单击“整页”链接可提高分辨率!!)
<!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>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>
1条答案
按热度按时间polhcujo1#
您需要执行以下修复-
1.将
app
属性应用于您的导航抽屉式菜单。1.将导航栏和内容都换行到
v-main
。1.也许您可以在
v-container
中使用fluid
属性(删除视口最大宽度大小断点)来更好地查看结果。这是演示版