vuetify 选项卡组件无法与 flex 动画一起正常工作

Question

我正在尝试让 v-tabs 与我的展开菜单一起使用。 基本上，当我单击切换打开时，右侧菜单会滑出，在此菜单中，我想使用 vuetify 中的选项卡组件。 它似乎不起作用，单击选项卡时，它会到处乱跳。 当我手动调整窗口大小时，它开始正常工作。请问有什么帮助吗？

这是代码笔

codepen.io/anon/pen/WmKQLp

Answer 1

您应该能够使用 Navigation Drawer 而无需任何自定义样式...（Vuetify 已内置组件来完成您要完成的任务）..

这是一个“快速而肮脏”的伪示例，展示了如何完成此操作：

Codepen Example can be found here. 更新了大小调整功能

---

---

编辑： 如果您确实想使用自定义 CSS，则需要添加一个额外的自定义 CSS 类 - 这是因为 translate 以及其他 Vuetify 样式与您的自定义 CSS 冲突...

As outlined here，添加这个类：（我强烈建议不要这样做）

.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();
  }
});