vue拖动设置宽度

可以使用Vue的指令来实现拖动设置宽度的功能。

首先，在模板中添加一个需要设置宽度的元素，并给其设置一个初始宽度。

<template>
  <div class="container">
    <div class="resizable" :style="{ width: width + 'px' }" v-draggable>
      <!-- 可调整宽度的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 200, // 初始宽度
    };
  },
};
</script>

然后，定义一个Vue指令 `v-draggable`，用于监听拖动事件，计算拖动的距离并更新元素的宽度。

Vue.directive('draggable', {
  bind(el) {
    let startX, startWidth;

    el.addEventListener('mousedown', (event) => {
      startX = event.clientX;
      startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10);

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    });

    function onMouseMove(event) {
      const width = startWidth + event.clientX - startX;
      el.style.width = `${width}px`;
    }

    function onMouseUp() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }
  },
});

最后，在样式中设置拖动区域的样式和鼠标样式。

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.resizable {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ccc;
  cursor: col-resize; /* 设置鼠标样式 */
}

这样，就可以实现一个可以拖动设置宽度的元素了。