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

Posted 2023-02-16

【中文标题】Vuetify 导航抽屉拖动以调整大小

【英文标题】：Vuetify Navigation Drawer Drag To Resize

【发布时间】：2019-08-11 04:52:19

【问题描述】：

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

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

The CodePen can be found here.

---

编辑：为此问题/帖子添加了演示代码工作解决方案。这样，如果 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 : 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>

【问题讨论】：

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

你是最棒的！！！！！！！！！你应该提交一个答案，这样我就可以将其标记为已接受。这是一个巨大的帮助，我非常感谢你。

很高兴它帮助了你:)

【参考方案1】：

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

鼠标按下时添加

el.style.transition ='initial';

在鼠标上添加

el.style.transition ='';

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