Vuetify选项卡组件与Flex动画无法正确使用

Question

我正在尝试使V-Tabs使用我的展开菜单。基本上，当我单击"切换"打开时，右侧菜单将滑出，在此菜单中，我想使用Vuetify中的选项卡组件。它似乎不起作用，当单击选项卡时，它在整个地方都跳跃。当我手动调整窗口大小时，它开始正常工作。有帮助吗？

这是Codepen

codepen.io/anon/pen/WmKQLp

Answer 1

您应该能够使用无需任何自定义样式的导航抽屉...

这是一个"快速而肮脏"的伪示例，显示如何完成此操作：

Codepen示例可以在此处找到。用调整能力

更新

---

---

编辑：如果您确实想使用自定义CSS，则需要添加其他自定义CSS类 - 这是由于translate而发生的，以及与您的自定义CSS相冲突的其他Vuetify样式...

如下所述，添加此类：（我非常建议您不要这样做）

.v-tabs__container {
  transform: translateX(0px)!important;
}

---

---

html

<div id="app">
  <v-app>
    <v-navigation-drawer app right width="550" v-model="navigation.shown">
      <v-toolbar color="primary">
        <v-toolbar-title class="headline text-uppercase">
          <span>t a</span><span class="font-weight-light"> B S </span>
        </v-toolbar-title>
      </v-toolbar>
      <v-tabs>
        <v-tab v-for="n in 3" :key="n">
          Item {{ n }}
        </v-tab>
        <v-tab-item v-for="n in 3" :key="n">
          <v-card flat>
            <v-card-text>Content for tab {{ n }} would go here</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>
    </v-navigation-drawer>
    <v-layout justify-center>
      <v-btn @click="navigation.shown = !navigation.shown">Toggle {{ direction }}</v-btn>
    </v-layout>
  </v-app>
</div>

---

JS/VUE

new Vue({
  el: "#app",
  data: () => {
    return {
      navigation: {
        shown: false,
      }
    };
  },
  computed: {
    direction() {
      return this.navigation.shown === false ? "Open" : "Closed"
    }
  },
});

---

---

编辑：（具有调整功能）

html：

<div id="app">
  <v-app>
    <v-navigation-drawer 
      ref="drawer" 
      app 
      right 
      :width="navigation.width" 
      v-model="navigation.shown"
    >
      <v-toolbar color="primary">
        <v-toolbar-title class="headline text-uppercase">
          <span>t a</span><span class="font-weight-light"> b s </span>
        </v-toolbar-title>
      </v-toolbar>
      <v-tabs>
        <v-tab v-for="n in 3" :key="n">
          Item {{ n }}
        </v-tab>
        <v-tab-item v-for="n in 3" :key="n">
          <v-card flat>
            <v-card-text>Content for tab {{ n }} would go here</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>
    </v-navigation-drawer>
    <v-layout justify-center>
      <v-btn @click="navigation.shown = !navigation.shown">Toggle {{ direction }}</v-btn>
    </v-layout>
  </v-app>
</div>

js/vue：

new Vue({
  el: "#app",
  data: () => {
    return {
      navigation: {
        shown: false,
        width: 550,
        borderSize: 3
      }
    };
  },
  computed: {
    direction() {
      return this.navigation.shown === false ? "Open" : "Closed";
    }
  },
  methods: {
    setBorderWidth() {
      let i = this.$refs.drawer.$el.querySelector(
        ".v-navigation-drawer__border"
      );
      i.style.width = this.navigation.borderSize + "px";
      i.style.cursor = "ew-resize";
    },
    setEvents() {
      const minSize = this.navigation.borderSize;
      const el = this.$refs.drawer.$el;
      const drawerBorder = el.querySelector(".v-navigation-drawer__border");
      const vm = this;
      const direction = el.classList.contains("v-navigation-drawer--right")
        ? "right"
        : "left";
      function resize(e) {
        document.body.style.cursor = "ew-resize";
        let f = direction === "right"
          ? document.body.scrollWidth - e.clientX
          : e.clientX;
        el.style.width = parseInt(f) + "px";
      }
      drawerBorder.addEventListener(
        "mousedown",
        function(e) {
          if (e.offsetX < minSize) {
            el.style.transition = "initial";
            document.addEventListener("mousemove", resize, false);
          }
        },
        false
      );
      document.addEventListener(
        "mouseup",
        function() {
          el.style.transition = "";
          vm.navigation.width = el.style.width;
          document.body.style.cursor = "";
          document.removeEventListener("mousemove", resize, false);
        },
        false
      );
    }
  },
  mounted() {
    this.setBorderWidth();
    this.setEvents();
  }
});