一、最终效果
mysplit
二、组件代码
<template>
<div ref="container" class="container">
<div class="my-left" :style="leftStyle">
<slot name="left"></slot>
</div>
<div ref="spliter" style="height: 100%; width: 10px" class="my-spliter" />
<div class="my-right" :style="rightStyle">
<slot name="right"></slot>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const container = ref(null);
const spliter = ref(null);
const leftStyle = ref({});
const rightStyle = ref({});
const ratio = ref(0.5);
function updatePaneStyles(newRatio) {
leftStyle.value = { width: `calc(${newRatio * 100}% - 5px)` };
rightStyle.value = { width: `calc(${(1 - newRatio) * 100}% - 5px)` };
}
function handleResize(e) {
const containerWidth = container.value.clientWidth;
const rect = container.value.getBoundingClientRect();
const initX = rect.left;
function onMouseMove(e) {
e.preventDefault();
// 限制鼠标移动事件的范围为container容器四至范围内
if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
onMouseUp();
}
const moveScale = (e.clientX - initX) / containerWidth;
const newRatio = moveScale;
if (newRatio > 0.05 && newRatio < 0.95) {
ratio.value = newRatio;
updatePaneStyles(newRatio);
}
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
function onDblClick(e) {
ratio.value = 0.5;
updatePaneStyles(ratio.value);
}
onMounted(() => {
updatePaneStyles(ratio.value);
if (spliter.value) {
spliter.value.addEventListener('mousedown', handleResize, false);
spliter.value.addEventListener('dblclick', onDblClick, false);
}
})
onUnmounted(() => {
if (spliter.value) {
spliter.value.removeEventListener('mousedown', handleResize);
spliter.value.removeEventListener('dblclick', onDblClick);
}
})
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.my-left {
height: 100%;
z-index: 1;
}
.my-right {
height: 100%;
z-index: 1;
}
.my-spliter {
cursor: col-resize;
position: relative;
z-index: 2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background-color: rgba(0, 0, 0, 0.15);
width: 1.5px;
height: 30px;
}
&:before {
margin-left: -2px;
}
&:after {
margin-left: 1px;
}
&:hover:before,
&:hover:after {
width: 1.5px;
background-color: rgba(0, 0, 0, 0.35);
}
}
</style>
三、使用实例
<template>
<div style="color:#000000;height: 100%;width:100%;background-color: #ffffff">
<MySplit>
<template #left>
<div style="border:1px solid #eee;height: 100%;background-color: #d9ecff">
鼠标移入中间的的spliter按下鼠标左键并进行左右拖动,可以改变左右分块的宽度。
</div>
</template>
<template #right>
<div style="border:1px solid #eee;height: 100%;background-color:#fcd3d3">
左右分块的宽度默认各占50%,鼠标移入spliter并双击会恢复默认占比。
<div style="color: red;">注意当拖动spliter时如果鼠标范围超过外框线会自动取消鼠标移动事件!</div>
</div>
</template>
</MySplit>
</div>
</template>
<script setup lang="ts">
import MySplit from '@/components/mySplit/index.vue';
</script>
<style scoped></style>