크기를 조정하려면 탐색 드로어 끌기

크기를 조정하려면 탐색 드로어 끌기

그래서 나는 그것을 '크기 조정'이 작동하는 곳으로 가져갔다. 단지 약간 느릿느릿 느껴질 뿐이다.왜 그런지, 어떻게 고쳐야 하는지 아는 사람 있어?

다음을 사용하여 새로 고침을 강제 적용vm.$forceUpdate()하지만 그건 아무것도 할 수 없는 것 같았어

코드펜은 여기서 찾을 수 있다.

---

편집: 이 질문/우편에 데모 코드 작업 솔루션이 추가됨이렇게 하면 코드펜에 무슨 일이 일어나도 우리는 여전히 작업 데모 코드를 가지고 있다.

new Vue({
  el: "#app",
  data: () => {
    return {
      navigation: {
        shown: false,
        width: 200,
        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";
      i.style.backgroundColor = "red";
    },
    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 = f + "px";
      }

      drawerBorder.addEventListener(
        "mousedown",
        (e) => {
          if (e.offsetX < minSize) {
            el.style.transition = "initial";
            document.addEventListener("mousemove", resize, false);
          }
        },
        false
      );

      document.addEventListener(
        "mouseup",
        () => {
          el.style.transition = "";
          this.navigation.width = el.style.width;
          document.body.style.cursor = "";
          document.removeEventListener("mousemove", resize, false);
        },
        false
      );
    }
  },
  mounted() {
    this.setBorderWidth();
    this.setEvents();
  }
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-navigation-drawer ref="drawer" app right hide-overlay :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-container>
      <v-layout justify-center>
        <v-btn @click="navigation.shown = !navigation.shown">Toggle {{ direction }}</v-btn>
      </v-layout>
      <v-layout justify-center>
        <p>Once the navigation drawer is opened, drag it's border to resize (highlited in red)</p>
      </v-layout>
    </v-container>
  </v-app>
</div>

네비게이션 드로어의 전환 효과 때문에. 마우스를 아래로 할 때 전환을 초기 상태로 설정한 다음 마우스를 위로 올리십시오.

술자리에서.

el.style.transition ='initial';

마우스를 올려서.

el.style.transition ='';

코드펜 : https://codepen.io/dagalti/pen/ywRNYx

참조URL: https://stackoverflow.com/questions/55261712/vuetify-navigation-drawer-drag-to-resize