<template>
<div class="main" ref="main">
<div class="left"></div>
<div class="pull" >⋮</div>
<div class="right"></div>
</div>
</template>
<script>
import {onMounted} from "vue";
export default defineComponent({
setup() {
const dragControllerDiv = () => {
var pull= document.getElementsByClassName("pull");
var left = document.getElementsByClassName("left");
var right = document.getElementsByClassName("right");
var main = document.getElementsByClassName("main");
for (let i = 0; i < pull.length; i++) {
pull[i].onmousedown = function (e) {
pull[i].style.background = "#818181";
var startX = e.clientX;
pull[i].left = pull[i].offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = pull[i].left + (endX - startX);
var maxT = main[i].clientWidth - pull[i].offsetWidth;
if (moveLen < 32) moveLen = 32;
if (moveLen > maxT - 150) moveLen = maxT - 150;
pull[i].style.left = moveLen;
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + "px";
right[j].style.width = main[i].clientWidth - moveLen - 10 + "px";
}
};
document.onmouseup = function (evt) {
pull[i].style.background = "#d6d6d6";
document.onmousemove = null;
document.onmouseup = null;
pull[i].releaseCapture && pull[i].releaseCapture();
};
pull[i].setCapture && pull[i].setCapture();
return false;
};
}
};
onMounted(() => {
dragControllerDiv();
});
return {
dragControllerDiv
};
},
});
</script>
<style lang="less" scoped>
.main{
100%;
height: 100vh;
overflow: hidden;
box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
.left {
calc(20% - 10px);
height: 100%;
background: #ffffff;
float: left;
}
.pull{
cursor: col-resize;
float: left;
position: relative;
top: 45%;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -10px;
10px;
height: 50px;
background-size: cover;
background-position: center;
font-size: 32px;
color: white;
}
.pull:hover {
color: #444444;
}
.right{
float: left;
80%;
height: 100%;
background: #fff;
box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
</style>