在vue里实现一个宽度可拖拽的div

可以使用vue-resizable-box这个插件来实现一个宽度可拖拽的div。

1. 安装vue-resizable-box

可以通过npm或yarn来安装vue-resizable-box：

npm install vue-resizable-box --save

yarn add vue-resizable-box

2. 在组件中使用vue-resizable-box

在需要使用可拖拽宽度的div的组件中，引入vue-resizable-box组件，并在template中使用它：

<template>
  <div>
    <vue-resizable-box
      :width="width"
      :min-width="200"
      :max-width="600"
      @resize="onResize"
    >
      <div class="content">可拖拽宽度的div</div>
    </vue-resizable-box>
  </div>
</template>

<script>
import VueResizableBox from 'vue-resizable-box';

export default {
  name: 'MyComponent',
  components: {
    VueResizableBox,
  },
  data() {
    return {
      width: 300,
    };
  },
  methods: {
    onResize(newWidth) {
      this.width = newWidth;
    },
  },
};
</script>

在上面的代码中，我们引入了vue-resizable-box组件，并在template中使用它。其中，width属性控制div的宽度，min-width和max-width属性分别控制div的最小和最大宽度。@resize事件监听div的宽度变化，并调用onResize方法更新div的宽度。

3. 样式调整

为了让vue-resizable-box的表现更符合实际需求，我们需要调整一些样式：

.vue-resizable-box {
  position: relative;
  overflow: hidden;
}

.vue-resizable-box .vue-resizable-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: e-resize;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.vue-resizable-box .content {
  height: 100%;
  background-color: #fff;
  padding: 10px;
}

在上面的代码中，我们将vue-resizable-box设置为相对定位，并隐藏超出范围的内容。vue-resizable-handle是拖拽宽度的手柄，我们将它设置为绝对定位，并调整样式。content是div的内容区域，我们将它设置为与父元素等高，并设置背景色和内边距。