vue中实现拖动调整左右两侧div的宽度

可以使用`vue-draggable-resizable`插件来实现拖动调整左右两侧div的宽度。

首先在项目中安装`vue-draggable-resizable`：

npm install vue-draggable-resizable --save

然后在需要使用的组件中引入：

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

接着在组件中使用`vue-draggable-resizable`：

<template>
  <div>
    <vue-draggable-resizable
      :w="leftWidth"
      :h="height"
      :x="0"
      :y="0"
      :min-width="minWidth"
      :max-width="maxWidth"
      :parent="true"
      :active="true"
      :grid="[1, 1]"
      :handles="['e']"
      @resize="onResize"
    >
      <div class="left"></div>
    </vue-draggable-resizable>

    <div class="divider"></div>

    <div class="right"></div>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

export default {
  components: {
    VueDraggableResizable
  },
  data() {
    return {
      leftWidth: 200,
      height: 500,
      minWidth: 100,
      maxWidth: 400
    }
  },
  methods: {
    onResize() {
      // 当左侧div宽度改变时触发
    }
  }
}
</script>

在上面的代码中，我们使用了`vue-draggable-resizable`组件来实现拖动调整左侧div的宽度。具体的参数和事件如下：

- `w`：左侧div的宽度
- `h`：左侧div的高度
- `x`：左侧div的x坐标
- `y`：左侧div的y坐标
- `min-width`：左侧div的最小宽度
- `max-width`：左侧div的最大宽度
- `parent`：是否限制在父元素内
- `active`：是否活动状态
- `grid`：拖拽的网格大小
- `handles`：拖拽的手柄位置
- `@resize`：左侧div改变宽度时触发的事件

通过设置`handles`为`['e']`，表示只能横向拖动调整宽度，而不能改变高度。当左侧div的宽度改变时，会触发`@resize`事件，在事件处理函数中可以实现相应的逻辑。

最后，为了实现左右两侧div并排显示，需要在样式中设置：

.left {
  float: left;
  height: 100%;
  background-color: #f0f0f0;
}

.right {
  float: left;
  height: 100%;
  width: calc(100% - 200px);
  background-color: #e0e0e0;
}

.divider {
  float: left;
  height: 100%;
  width: 10px;
  background-color: #d0d0d0;
}

这样就可以实现拖动调整左右两侧div的宽度了。