javascript Vuetify导航抽屉的怪异行为与迷你变体.sync

wz3gfoph 于 2022-12-25 发布在 Java

关注(0)|答案(1)|浏览(194)

我的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>

JavaScript

来源：https://stackoverflow.com/questions/74899517/vuetify-navigation-drawer-weird-behavior-with-mini-variant-sync

1条答案

按热度按时间

polhcujo1#

您需要执行以下修复-
1.将app属性应用于您的导航抽屉式菜单。
1.将导航栏和内容都换行到v-main。
1.也许您可以在v-container中使用fluid属性（删除视口最大宽度大小断点）来更好地查看结果。
这是演示版

<!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 id="inspire">
        <v-main>
          <v-card class="error white--text" height="100%">
            <v-expand-x-transition>
              <v-navigation-drawer
                v-model="drawer"
                :mini-variant.sync="mini"
                permanent
                expand-on-hover
                app
                class="primary"
                :left="true"
                >
                <v-list-item class="px-2">
                  <v-list-item-avatar>
                    <v-img src="https://picsum.photos/200/300"></v-img>
                  </v-list-item-avatar>
                  <v-list-item-title>Drawer</v-list-item-title>
                </v-list-item>
                <v-divider></v-divider>
              </v-navigation-drawer>
            </v-expand-x-transition>
            <v-container fluid
              >Hover on the drawer, and you should see that your strange padding
              is removed.
            </v-container
              >
          </v-card>
        </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,
            mini: true,
        },
      });
    </script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-25

我来回答

javascript Vuetify导航抽屉的怪异行为与迷你变体.sync

1条答案

相关问题

热门标签

最新问答