Компонент vuetify tabs некорректно работает с гибкой анимацией - PullRequest
Новая
       23

Компонент vuetify tabs некорректно работает с гибкой анимацией

1 голос
/ 19 марта 2019

Я пытаюсь заставить v-tab работать с моим меню расширения.В основном, когда я нажимаю на переключатель, открывается правое боковое меню, и внутри этого меню я хочу использовать компонент вкладок из vuetify.Кажется, он не работает, когда нажимаешь на вкладки, он прыгает повсюду.Он начинает работать правильно, когда я изменяю размер окна вручную.Любая помощь, пожалуйста?

Вот кодекс 

codepen.io/anon/pen/WmKQLp

1 Ответ

2 голосов
/ 19 марта 2019

Вы должны быть в состоянии использовать Навигационный ящик без необходимости какого-либо пользовательского стиля ... (Vuetify имеет встроенные компоненты для того, что вы пытаетесь выполнить) ..

Вот псевдо-пример «быстрого и грязного», показывающий, как этого можно добиться:

Пример Codepen можно найти здесь. обновлен с возможностью изменения размера

EDIT: Если вы действительно хотите использовать свой собственный CSS, вам нужно будет добавить дополнительный пользовательский класс CSS - это происходит из-за translate, среди других стилей Vuetify, конфликтующих с вашим пользовательским CSS ...

Как указано здесь , добавьте этот класс: ( Я настоятельно рекомендую не делать этого ) 

.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 / Вю 

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 / Вю: 

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