时间戳

首页 > 解决方案 > 当查看器断点低于 md 时，导航抽屉消失

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

问题描述

我有一个仪表板，如果查看器大小为 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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
        <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>
    </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>

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

<!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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
        <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>
    </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>

标签： javascriptvuejs2vuetify.js

解决方案

如果我正确理解您的问题，这是关于断点的。您可以使用 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

推荐阅读