4 changed files with 63 additions and 10 deletions
-
3src/main.js
-
43src/utils/resizable.js
-
16src/views/modules/property/available.vue
-
11src/views/modules/quote/detail/primary/quoteDetailOther.vue
@ -0,0 +1,43 @@ |
|||
// v-resizable.js
|
|||
export default { |
|||
bind(el) { |
|||
const minWidth = 400; // 设置表格最小宽度
|
|||
const minHeight = 200; // 设置表格最小高度
|
|||
let startX, startY, startWidth, startHeight; |
|||
|
|||
// 创建用于拖拽的右下角拖动柄
|
|||
const resizeHandle = document.createElement('div'); |
|||
resizeHandle.style.width = '10px'; |
|||
resizeHandle.style.height = '10px'; |
|||
// resizeHandle.style.background = 'rgba(0, 0, 0, 0.5)';
|
|||
resizeHandle.style.position = 'absolute'; |
|||
resizeHandle.style.right = '0'; |
|||
resizeHandle.style.bottom = '0'; |
|||
resizeHandle.style.cursor = 'se-resize'; |
|||
el.appendChild(resizeHandle); |
|||
|
|||
// 处理鼠标按下事件
|
|||
resizeHandle.addEventListener('mousedown', function (e) { |
|||
startX = e.clientX; |
|||
startY = e.clientY; |
|||
startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10); |
|||
startHeight = parseInt(document.defaultView.getComputedStyle(el).height, 10); |
|||
document.documentElement.addEventListener('mousemove', onMouseMove, false); |
|||
document.documentElement.addEventListener('mouseup', onMouseUp, false); |
|||
}); |
|||
|
|||
// 处理鼠标移动事件
|
|||
function onMouseMove(e) { |
|||
const width = startWidth + e.clientX - startX; |
|||
const height = startHeight + e.clientY - startY; |
|||
el.style.width = Math.max(minWidth, width) + 'px'; |
|||
el.style.height = Math.max(minHeight, height) + 'px'; |
|||
} |
|||
|
|||
// 处理鼠标松开事件
|
|||
function onMouseUp() { |
|||
document.documentElement.removeEventListener('mousemove', onMouseMove, false); |
|||
document.documentElement.removeEventListener('mouseup', onMouseUp, false); |
|||
} |
|||
} |
|||
}; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue