Vuetify 导航抽屉拖动以调整大小答案

【问题标题】：Vuetify Navigation Drawer Drag To ResizeVuetify 导航抽屉拖动以调整大小
【发布时间】：2019-08-11 04:52:19
【问题描述】：

所以我已经把它带到了“拖动调整大小”的工作位置 - 只是感觉有点迟钝......有谁知道这可能是为什么，以及如何解决它？

我尝试使用 vm.$forceUpdate() 强制刷新，但这似乎没有任何作用..

编辑：为此问题/帖子添加了~~演示代码~~工作解决方案。这样，如果 CodePen 出现问题，我们仍然可以使用演示代码。

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>

【问题讨论】：

那是因为导航抽屉的过渡效果。在鼠标按下时将过渡设置为初始，然后在鼠标抬起时释放它。
你是最棒的！！！！！！！！！你应该提交一个答案，这样我就可以将其标记为已接受。这是一个巨大的帮助，我非常感谢你。
很高兴它帮助了你:)

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

那是因为导航抽屉的过渡效果。在鼠标按下时将过渡设置为初始，然后在鼠标抬起时将其释放。

鼠标按下时添加

el.style.transition ='initial';

在鼠标上添加

el.style.transition ='';

代码笔：https://codepen.io/dagalti/pen/ywRNYx

【讨论】：