xsx
6 months ago
4 changed files with 227 additions and 132 deletions
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<el-aside :style="{ width: asideWidth + 'px' }" class="resizable-aside"> |
|||
<slot></slot> |
|||
<!-- 拖拽条 --> |
|||
<div class="resize-handle" @mousedown="startResize" :class="{ 'resizing': isResizing }" title="拖拽调整宽度"> |
|||
<div class="resize-line"></div> |
|||
</div> |
|||
</el-aside> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ResizableAside", |
|||
props: { |
|||
// 默认宽度 |
|||
defaultWidth: { |
|||
type: Number, |
|||
default: 260 |
|||
}, |
|||
// 最小宽度 |
|||
minWidth: { |
|||
type: Number, |
|||
default: 200 |
|||
}, |
|||
// 最大宽度 |
|||
maxWidth: { |
|||
type: Number, |
|||
default: 500 |
|||
}, |
|||
// localStorage存储key |
|||
storageKey: { |
|||
type: String, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
asideWidth: this.defaultWidth, |
|||
isResizing: false, |
|||
startX: 0, |
|||
startWidth: 0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 从localStorage恢复宽度设置 |
|||
const savedWidth = localStorage.getItem(this.storageKey); |
|||
if (savedWidth) { |
|||
this.asideWidth = parseInt(savedWidth); |
|||
} |
|||
|
|||
// 添加全局事件监听 |
|||
document.addEventListener('mousemove', this.handleResize); |
|||
document.addEventListener('mouseup', this.stopResize); |
|||
}, |
|||
beforeDestroy() { |
|||
// 清理事件监听 |
|||
document.removeEventListener('mousemove', this.handleResize); |
|||
document.removeEventListener('mouseup', this.stopResize); |
|||
}, |
|||
methods: { |
|||
// 拖拽相关方法 |
|||
startResize(e) { |
|||
this.isResizing = true; |
|||
this.startX = e.clientX; |
|||
this.startWidth = this.asideWidth; |
|||
document.body.style.cursor = 'col-resize'; |
|||
document.body.style.userSelect = 'none'; |
|||
e.preventDefault(); |
|||
}, |
|||
handleResize(e) { |
|||
if (!this.isResizing) return; |
|||
|
|||
const deltaX = e.clientX - this.startX; |
|||
let newWidth = this.startWidth + deltaX; |
|||
|
|||
// 限制宽度范围 |
|||
newWidth = Math.max(this.minWidth, Math.min(this.maxWidth, newWidth)); |
|||
|
|||
this.asideWidth = newWidth; |
|||
}, |
|||
stopResize() { |
|||
if (!this.isResizing) return; |
|||
|
|||
this.isResizing = false; |
|||
document.body.style.cursor = ''; |
|||
document.body.style.userSelect = ''; |
|||
|
|||
// 保存宽度到localStorage |
|||
localStorage.setItem(this.storageKey, this.asideWidth.toString()); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.resizable-aside { |
|||
display: flex; |
|||
flex-direction: column; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.08); |
|||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); |
|||
position: relative; |
|||
|
|||
// 拖拽条样式 |
|||
.resize-handle { |
|||
position: absolute; |
|||
top: 0; |
|||
right: -3px; |
|||
width: 6px; |
|||
height: 100%; |
|||
cursor: col-resize; |
|||
z-index: 10; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
transition: background-color 0.2s ease; |
|||
|
|||
.resize-line { |
|||
width: 2px; |
|||
height: 100%; |
|||
background-color: var(--im-background-active-dark); |
|||
border-radius: 1px; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
&:hover .resize-line, |
|||
&.resizing .resize-line { |
|||
width: 3px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue