vue实现左右拉伸
实现左右拉伸布局
在Vue中实现左右拉伸布局可以通过CSS Flexbox或Grid结合Vue的响应式数据绑定完成。以下是两种常见方法：
使用Flexbox布局
通过CSS Flexbox实现左右面板可拉伸，中间添加拖拽条控制宽度：
<template>
<div class="container">
<div class="left-panel" :style="{ width: leftWidth + 'px' }">
<!-- 左侧内容 -->
</div>
<div
class="drag-bar"
@mousedown="startDrag"
></div>
<div class="right-panel">
<!-- 右侧内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
leftWidth: 200,
isDragging: false
}
},
methods: {
startDrag(e) {
this.isDragging = true
document.addEventListener('mousemove', this.onDrag)
document.addEventListener('mouseup', this.stopDrag)
},
onDrag(e) {
if (this.isDragging) {
this.leftWidth = e.clientX
}
},
stopDrag() {
this.isDragging = false
document.removeEventListener('mousemove', this.onDrag)
document.removeEventListener('mouseup', this.stopDrag)
}
}
}
</script>
<style>
.container {
display: flex;
height: 100vh;
}
.left-panel {
background: #f0f0f0;
min-width: 100px;
}
.drag-bar {
width: 8px;
background: #ddd;
cursor: col-resize;
}
.right-panel {
flex: 1;
background: #fff;
}
</style>使用CSS Grid布局
CSS Grid提供更精确的列控制，适合复杂布局：
<template>
<div
class="grid-container"
:style="{
'grid-template-columns': `${leftWidth}px 8px 1fr`
}"
>
<div class="left">
<!-- 左侧内容 -->
</div>
<div
class="divider"
@mousedown="startDrag"
></div>
<div class="right">
<!-- 右侧内容 -->
</div>
</div>
</template>
<style>
.grid-container {
display: grid;
height: 100vh;
}
.divider {
background: #ddd;
cursor: col-resize;
}
</style>注意事项
- 拖拽过程中添加
user-select: none防止文本选中 - 移动端需要额外处理触摸事件
- 可添加
min-width和max-width限制拉伸范围 - 性能优化可考虑节流处理mousemove事件
扩展方案
对于需要保存布局状态的场景，可将宽度值存入localStorage或通过Vuex管理：
// 在created钩子中恢复宽度
created() {
const savedWidth = localStorage.getItem('leftPanelWidth')
if (savedWidth) this.leftWidth = Number(savedWidth)
},
// 在拖拽结束时保存
stopDrag() {
localStorage.setItem('leftPanelWidth', this.leftWidth)
}
