将拖拽逻辑提取到一个独立的 JavaScript 文件中,并在 Vue 组件中使用它,你可以按照以下步骤进行:
-
创建一个单独的 JavaScript 文件:在你的项目中创建一个新的文件,比如
resizeHandler.js
。 -
将拖拽逻辑写入这个文件:在
resizeHandler.js
中定义一个函数来处理拖拽事件。 -
在 Vue 组件中导入并使用这个函数。
1. 创建 resizeHandler.js
// resizeHandler.js
export function setupResizeHandler(resizeElement, leftElement, midElement) {
let startY;
let startHeight;
const onMouseDown = (e) => {
startY = e.clientY;
startHeight = leftElement.offsetHeight;
const onMouseMove = (e) => {
const endY = e.clientY;
let moveLen = startHeight + (endY - startY);
if (moveLen < 30) moveLen = 30;
leftElement.style.height = `${moveLen}px`;
midElement.style.height = `calc(100% - ${moveLen}px - 5px)`;
};
const onMouseUp = () => {
document.onmousemove = null;
document.onmouseup = null;
resizeElement.releaseCapture && resizeElement.releaseCapture();
};
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
resizeElement.setCapture && resizeElement.setCapture();
return false;
};
resizeElement.onmousedown = onMouseDown;
}
2. 在 Vue 组件中导入并使用这个函数
<template>
<div class="box" id="box">
<div v-if="showMid" class="left" ref="left">
<!-- 上面的div内容 -->
<p>这里是上面的内容,可以滚动。</p>
<!-- 更多内容 -->
</div>
<div v-if="showResize" id="resize" class="resize" title="收缩侧边栏"></div>
<div v-if="showMid" class="mid" id="center">
<!-- 中间div内容 -->
</div>
<button @click="toggleMid">显示/隐藏 中间区域</button>
</div>
</template>
<script>
import { setupResizeHandler } from './resizeHandler'; // 导入处理函数
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['showMid', 'showResize']),
},
methods: {
...mapMutations(['toggleShowMid']),
toggleMid() {
this.toggleShowMid();
}
},
mounted() {
const resize = this.$refs.resize;
const left = this.$refs.left;
const mid = this.$refs.mid;
if (resize && left && mid) {
setupResizeHandler(resize, left, mid);
}
}
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden; /* 防止整个页面滚动 */
}
.box {
width: 100%;
height: 100%;
}
.left {
width: 100%;
min-height: 300px;
max-height: 100%; /* 设定最大高度 */
overflow-y: auto; /* 启用垂直滚动 */
background: #d6d6d6;
}
.resize {
cursor: row-resize;
position: relative;
background-color: yellow;
width: 100%;
height: 5px;
font-size: 32px;
}
.resize:hover {
background-color: #444444;
}
.mid {
width: 100%;
height: calc(100% - 305px); /* 减去.left的最小高度和resize的高度 */
background-color: red;
}
</style>
说明
resizeHandler.js
:定义了一个setupResizeHandler
函数,该函数接受拖拽元素、左侧元素和中间元素作为参数,处理拖拽逻辑。- 在 Vue 组件中:
- 导入
setupResizeHandler
函数。 - 在
mounted
钩子中调用setupResizeHandler
函数,将相关元素传入。
- 导入
这样,你就将拖拽逻辑分离到了一个独立的文件中,提高了代码的可维护性。如果有其他问题或需要进一步的帮助,请告诉我!