vue解决鼠标拖动改变标签宽度 , 不会因为鼠标移动太快, 脱离范围导致修改宽度停止

要解决鼠标拖动改变标签宽度，可以使用Vue的指令来实现。首先在标签上绑定mousedown事件，然后在document上绑定mousemove和mouseup事件，这样可以通过鼠标移动事件来实时更新标签的宽度。

下面是一个简单的例子：

<template>
  <div>
    <div class="tab" v-bind:style="{ width: width + 'px' }" v-on:mousedown="startResize"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startWidth: 0,
      resizing: false,
      width: 100,
    };
  },
  methods: {
    startResize(e) {
      this.startX = e.pageX;
      this.startWidth = this.width;
      this.resizing = true;
      document.addEventListener("mousemove", this.resize);
      document.addEventListener("mouseup", this.stopResize);
    },
    resize(e) {
      if (this.resizing) {
        let dx = e.pageX - this.startX;
        this.width = this.startWidth + dx;
      }
    },
    stopResize() {
      this.resizing = false;
      document.removeEventListener("mousemove", this.resize);
      document.removeEventListener("mouseup", this.stopResize);
    },
  },
};
</script>

在上面的代码中，我们使用一个data属性来存储当前标签的宽度，以及一些状态信息。在startResize方法中，我们记录下鼠标按下时的位置和当前标签的宽度，然后监听document的mousemove和mouseup事件。在resize方法中，我们计算鼠标移动的距离，并根据这个距离来更新标签的宽度。在stopResize方法中，我们清除状态信息和事件监听器。

为了解决鼠标移动太快导致修改宽度停止的问题，我们可以在mousemove事件中添加一个判断，判断当前鼠标是否还在标签内，如果不在，就停止修改宽度。具体实现可以参考下面的代码：

<template>
  <div>
    <div
      class="tab"
      v-bind:style="{ width: width + 'px' }"
      v-on:mousedown="startResize"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startWidth: 0,
      resizing: false,
      width: 100,
    };
  },
  methods: {
    startResize(e) {
      this.startX = e.pageX;
      this.startWidth = this.width;
      this.resizing = true;
      document.addEventListener("mousemove", this.resize);
      document.addEventListener("mouseup", this.stopResize);
    },
    resize(e) {
      if (this.resizing) {
        let dx = e.pageX - this.startX;
        let newWidth = this.startWidth + dx;
        if (newWidth >= 0 && newWidth <= this.$el.clientWidth) {
          this.width = newWidth;
        } else {
          this.stopResize();
        }
      }
    },
    stopResize() {
      this.resizing = false;
      document.removeEventListener("mousemove", this.resize);
      document.removeEventListener("mouseup", this.stopResize);
    },
  },
};
</script>

在上面的代码中，我们使用this.$el.clientWidth来获取标签的宽度，然后判断新的宽度是否在标签范围内。如果不在范围内，就调用stopResize方法停止修改宽度。