vue实现左右两栏布局宽度可拖拽

在Vue中实现两栏布局并且宽度可以拖拽，可以使用v-drag-resize指令。首先需要安装这个指令库：

npm install v-drag-resize --save

然后在Vue组件中使用它：

<template>
  <div>
    <div v-drag-resize="{width: leftColumnWidth}" class="left-column">左栏</div>
    <div class="right-column">右栏</div>
  </div>
</template>
 
<script>
import Vue from 'vue';
import drag from 'v-drag-resize';
 
Vue.use(drag);
 
export default {
  data() {
    return {
      leftColumnWidth: 200 // 左栏初始宽度
    };
  }
};
</script>
 
<style>
.left-column {
  background-color: #ddd;
  resize: horizontal;
  overflow: hidden;
}
.right-column {
  background-color: #f3f3f3;
  margin-left: 10px;
}
</style>

在这个例子中，v-drag-resize指令被用来使左边栏的宽度可以拖拽调整。你可以通过设置leftColumnWidth的值来控制左边栏的宽度。这个指令库还支持垂直和双向拖拽调整，你可以根据需要进行设置。