Question

我想要一个带有缩放宽度的可视化“临时导航抽屉”。 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>

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

Jsfiddle：https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ 缩小并关闭导航抽屉，以查看我在说什么

Answer 1

因此vuetify组件不支持对像素的# Sample data with mixed numeric and character columns df <- read.table(text = "a b c 184 20 55 100 32 563 18 12 88 5 99 52 32 36 22 ", header = T) df <- cbind(df, d = letters[1:5], e = LETTERS[1:5])属性使用像素，因此您有两个选择。您可以将width属性与像素一起使用。或者，您可以添加一些CSS hack来改用vw。

选项1：将width更改为以下内容：

v-navigation-drawer

选项2：

将此添加到您的CSS

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

Vuetify导航抽屉问题

1 个答案: