可以使用`
vue-draggable-resizable`插件来
实现拖动调整左右两侧div的宽度。
首先在项目
中安装`
vue-draggable-resizable`：
```
npm install
vue-draggable-resizable --save
```
然后在需要使用的组件
中引入：
```javascript
import
VueDraggableResizable from '
vue-draggable-resizable'
import '
vue-draggable-resizable/dist/
VueDraggableResizable.css'
```
接着在组件
中使用`
vue-draggable-resizable`：
```html
<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并排显示，需要在样式
中设置：
```css
.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的宽度了。
8500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
