当查看器断点低于 md 时，导航抽屉消失

问题描述 投票：0回答：3

我有一个仪表板，如果查看器大小为 sm 及以上则需要显示，但如果为 xs 则隐藏。

我的原始模板如下。问题是在 md 下面，导航抽屉将被隐藏。 

<div id="app">
    <template>
        <v-app id="inspire">
            <v-navigation-drawer
                v-model="drawer"
                expand-on-hover
                app                    
                clipped
                class="d-none d-sm-inline"
            >
                <v-list >
                <v-list-item
                >
                    <v-list-item-action>
                        <v-icon>
                            assignment
                        </v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>
                            assignment
                        </v-list-item-title>
                    </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
        </v-app>
    </template>
</div>

编辑： 这是一个完整的例子。宽度低于 1264px 抽屉将消失：

<!DOCTYPE html>
<html>
    <head>
        <!-- Load polyfills to support older browsers -->         
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script> 
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
        <link href="https://cdn.materialdesignicons.com/4.0.96/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    </head>
    <body>
<div id="app">
    <template>
        <v-app id="inspire">
            <v-navigation-drawer
                v-model="drawer"
                expand-on-hover
                app                    
                clipped
                class="d-none d-sm-inline"
            >
                <v-list >
                <v-list-item
                >
                    <v-list-item-action>
                        <v-icon>
                            assignment
                        </v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>
                            assignment
                        </v-list-item-title>
                    </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
        </v-app>
    </template>
</div>
        <script  type="text/babel" data-presets="es2015">
            new Vue
                 (
                    { 
                       el: "#app", 
                       vuetify: new Vuetify(), 
                       data:  
                       { 
                           drawer: null, 
                       },  
                    }
                 );     
        </script>
    </body>
</html>

编辑2：罗西先生建议的解决方案也不起作用并且具有相同的行为

<!DOCTYPE html>
<html>
    <head>
        <!-- Load polyfills to support older browsers -->         
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script> 
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
        <link href="https://cdn.materialdesignicons.com/4.0.96/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    </head>
    <body>
<div id="app">
    <template>
        <v-app id="inspire">
            <v-navigation-drawer
                v-model="drawer"
                expand-on-hover
                app                    
                clipped
                :class="{'display': $vuetify.breakpoint.smAndUp ? 'none' : 'inline'}"
            >
                <v-list >
                <v-list-item
                >
                    <v-list-item-action>
                        <v-icon>
                            assignment
                        </v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>
                            assignment
                        </v-list-item-title>
                    </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
        </v-app>
    </template>
</div>
        <script  type="text/babel" data-presets="es2015">
            new Vue
                 (
                    { 
                       el: "#app", 
                       vuetify: new Vuetify(), 
                       data:  
                       { 
                           drawer: null, 
                       },  
                    }
                 );     
        </script>
    </body>
</html>
javascript vuejs2 vuetify.js
3个回答
0
投票

如果我正确理解你的问题，这是关于断点的。 您可以使用 Vuetify 断点来显示或隐藏某些元素。 例如，如果你想为 sm 及以上显示它，你可以使用这个：

:class="$vuetify.breakpoint.smAndUp ? "d-inline" : "d-block"

或者如果是 xs 则简单地隐藏它：

:class="$vuetify.breakpoint.xsOnly ? "d-inline" : "d-block"

这是有关如何使用断点的文档页面：https://vuetifyjs.com/en/customization/breakpoints#breakpoints

0
投票

问题在于，由于某种原因，vuetify 将导航抽屉 100% 移至左侧，因此将其隐藏。我的解决方案是通过添加样式“style =“transform：transform：transformX（0％）;top：48px;”'来覆盖该移动，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <!-- Load polyfills to support older browsers -->         
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script> 
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
        <link href="https://cdn.materialdesignicons.com/4.0.96/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    </head>
    <body>
<div id="app">
    <template>
        <v-app id="inspire">
            <v-navigation-drawer
                v-model="drawer"
                expand-on-hover
                app                    
                clipped
style="transform: translateX(0%);top:48px;"
                class="d-none d-sm-inline"
            >
                <v-list >
                <v-list-item
                >
                    <v-list-item-action>
                        <v-icon>
                            assignment
                        </v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>
                            assignment
                        </v-list-item-title>
                    </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
        </v-app>
    </template>
</div>
        <script  type="text/babel" data-presets="es2015">
            new Vue
                 (
                    { 
                       el: "#app", 
                       vuetify: new Vuetify(), 
                       data:  
                       { 
                           drawer: null, 
                       },  
                    }
                 );     
        </script>
    </body>
</html>

translateX 覆盖向左和顶部的移动：48px 将导航抽屉设置在我原来的应用程序栏下方，如果您没有应用程序栏，那么您将不需要它。

我不确定这是否是 vuetify v2.0.11 中的错误，但它适用于该修复。希望这对某人有帮助，我花了一个小时左右才找到并修复

0
投票

对于 vuetify v3，如果您不希望抽屉在较低分辨率下隐藏，则应该将 

mobile-breakpoint
属性设置为较低的断点。

您可以在 vuetify 文档中找到它。

示例：

<v-navigation-drawer
    expand-on-hover
    rail
    mobile-breakpoint="xs"
>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.