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

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

javascript vuejs2

Javascript 当查看器断点低于md时，导航抽屉消失,javascript,vuejs2,vuetify.js,Javascript,Vuejs2,Vuetify.js,我有一个仪表板，需要显示，如果观众大小sm及以上，但隐藏如果是xs 我的原始模板如下。问题是md下面的导航抽屉会被隐藏 <div id="app"> <template> <v-app id="inspire"> <v-navigation-drawer v-model="drawer" expand-on-hover

我有一个仪表板，需要显示，如果观众大小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>


分配
分配
新Vue
(
{ 
el:“应用程序”，
vuetify:新的vuetify（），
数据：
{ 
出票人：空，
},  
}
);

编辑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/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>


分配
分配
新Vue
(
{ 
el:“应用程序”，
vuetify:新的vuetify（），
数据：
{ 
出票人：空，
},  
}
);

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

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

如果是xs，则只需将其隐藏：

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

这是关于如何使用断点的文档页面：

问题在于，出于某种原因，vuetify将导航抽屉100%向左移动，从而将其隐藏。我的解决方案是通过添加样式“style=”transform:translateX（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/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
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>


分配
分配
新Vue
(
{ 
el:“应用程序”，
vuetify:新的vuetify（），
数据：
{ 
出票人：空，
},  
}
);

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

我不确定这是否是vuetify v2.0.11中的一个bug，但它可以与该修复一起工作。希望这对某人有帮助，我花了大约一个小时找到并修复

我认为vuetify没有问题，你能上传一个大家都能看到的工作示例吗？这不起作用，它的行为与以前一样。我编辑了我的问题