javascript - Vuetify 抽屉导航问题

标签 javascript css vue.js vuetify.js

我想要一个具有缩放宽度的 vuetify“临时抽屉导航”。 vuetify 组件默认具有 300px 宽度,所以我像这样覆盖它(使用 https://vuetifyjs.com/en/components/navigation-drawers“临时”示例)

<template>
  <v-layout
    wrap
    style="height: 200px;"
  >
    <v-container>
      <v-layout justify-center>
        <v-btn
          color="pink"
          dark
          @click.stop="drawer = !drawer"
        >
          Toggle
        </v-btn>
      </v-layout>
    </v-container>

    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
      style="width: 13vw"                //I change width to 13vw here
    >

    </v-navigation-drawer>
  </v-layout>
</template>

问题是,当菜单未激活时,它隐藏在视口(viewport)左侧 300px 处。我在较大的显示器上缩放 13vw 宽度将变得大于 300 像素,因此左侧导航菜单的一部分未隐藏。如何更改导航菜单的默认隐藏?

jsfiddle:https://jsfiddle.net/agreyfield91/tgpfhn8m/957/
在未激活抽屉导航的情况下缩小以查看我在说什么

最佳答案

所以 vuetify 组件不支持对 width 使用除像素以外的任何东西。组件的属性,因此您有两个选择。您可以使用 width属性改为像素。或者您可以添加一些 css hack 来使用 vw 。

选项 1:更改您的 v-navigation-drawer到以下:

<v-navigation-drawer
    v-model="drawer"
    absolute
    temporary
    width="500"
>

选项 2:

将此添加到您的CSS
.v-navigation-drawer--close.v-navigation-drawer--temporary {
    transform: translateX(-13vw) !important;
}

关于javascript - Vuetify 抽屉导航问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51644596/

相关文章:

css - 垂直和水平对齐 checkBoxGroupInput

html - 当动画的一部分时,标签不会激活关联的字段

javascript - Javascript:在另一个方法内调用一个方法

javascript - 从HTML(Webpack)引用哈希的SVG

javascript - 使用 TCPDF 保存 PDF 时无输出

javascript - AngularJS显示数组基于关闭复选框的选择

javascript - 无法获取正确的用户 ID 以删除 vue.js 中的列表元素

javascript - Chrome或Bootstrap 4.0.0-alpha.5错误?

html - 使整个 div 区域可点击

javascript - 如何在 VueJS 单元测试中触发子组件的点击事件?