编辑器面板框架
效果图
主要思路
点击滑动器，添加鼠标按下事件，监听鼠标移动和鼠标松开两个事件，鼠标松开移除鼠标移动事件，鼠标移动，将要改变的容器宽或者高改变即可
实现代码(原生)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
#parent {
height: 100%;
min-width: 1360px;
}
* {
margin: 0px;
padding: 0px;
}
.split-pane {
display: flex;
background: palegreen;
height: 100%;
width: 100%;
}
.LeftOper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: bisque;
height: 100%;
width: 56px;
}
.chajian {
width: 48px;
height: 48px;
margin: 16px 0;
background: blueviolet;
}
.userShezhi {
width: 48px;
height: 48px;
margin: 16px 0;
background: green;
}
.pane-one {
width: 15%;
height: 100%;
background: palevioletred;
}
.pane-trigger {
width: 10px;
height: 100%;
background: palegoldenrod;
cursor: col-resize;
user-select: none;
}
.pane-two {
flex: 1;
height: 100%;
background: turquoise;
}
.pane-three {
display: flex;
flex-direction: column;
width: 100%;
background: skyblue;
height: 100%;
}
.pane-top {
width: 100%;
flex: 1;
background: pink;
}
.sliderResize {
width: 100%;
height: 10px;
background:palegoldenrod;
}
.pane-bottom {
width: 100%;
height: 20%;
display: none;
}
.paneBottomConfig {
width: 100%;
height: 20px;
background: purple;
}
</style>
</head>
<body>
<div class="split-pane">
<div class="LeftOper">
<div>
<div class="chajian isShowFile" >展示文件</div>
<div class="chajian"></div>
<div class="chajian"></div>
<div class="chajian"></div>
<div class="chajian"></div>
<div class="chajian"></div>
</div>
<div>
<div class="userShezhi"></div>
<div class="userShezhi"></div>
</div>
</div>
<div class="pane-one"></div>
<div class="pane-trigger"></div>
<div class="pane-two">
<div class="pane-three">
<div class="pane-top"></div>
<div class="sliderResize"></div>
<div class="pane-bottom">
<div class="paneBottomConfig">
<div class="fangda">操作栏放大</div>
</div>
<div>结果区</div>
</div>
</div>
</div>
</div>
</body>
<script>
let trigger = document.getElementsByClassName('pane-trigger')[0];
let splitPane = document.getElementsByClassName('split-pane')[0];
let paneone = document.getElementsByClassName('pane-one')[0];
let paneThree = document.getElementsByClassName('pane-three')[0];
let sliderResize = document.getElementsByClassName('sliderResize')[0];
let paneBottom = document.getElementsByClassName('pane-bottom')[0];
trigger.onclick = () => {
console.log('被点击')
}
// 按下滑动器
trigger.onmousedown = () => {
// 监听鼠标滑动和鼠标松开
document.addEventListener('mousemove', handleMousemove)
console.log('anxoa')
document.addEventListener('mouseup', handleMouseUp)
splitPane.style.cursor = "col-resize";
}
function handleMousemove (e) {
console.log(e.pageX)
const offset = e.pageX - splitPane.getBoundingClientRect().left - 56;
const slize = (offset / splitPane.getBoundingClientRect().width) * 100;
// 设置计算出来的宽
if ( slize > 60) {
return paneone.style.width = `60%`;
}
if (slize < 4) {
return paneone.style.width = 0;
}
if ( slize < 15) {
return paneone.style.width = `15%`;
}
paneone.style.width = `calc(${slize}% - 10px)`;
}
function handleMouseUp (e) {
// 再鼠标抬起的时候取消监听鼠标的拖动
document.removeEventListener('mousemove', handleMousemove)
splitPane.style.cursor = "auto";
}
console.log(splitPane.getBoundingClientRect())
// 下面的滑动器
// sliderResize paneBottom
function bttomMouseUp () {
paneThree.removeEventListener('mousemove', bttomMouseMove)
paneThree.style.cursor = "auto";
}
function bttomMouseMove (e) {
// 鼠标到页面的距离 - 容器到页面的距离 = 下面的高度
const resize = e.pageY;
const slize = ((paneThree.getBoundingClientRect().height - resize) / paneThree.getBoundingClientRect().height) * 100;
paneBottom.style.height = `calc(${slize}% - 10px)`;
if (slize < 5) {
paneBottom.style.display = 'none'
paneThree.style.cursor = "auto";
paneBottom.style.height = '20%';
paneThree.removeEventListener('mousemove', bttomMouseMove)
}
}
sliderResize.onmousedown = () => {
paneThree.addEventListener('mousemove',bttomMouseMove )
paneThree.addEventListener('mouseup', bttomMouseUp)
paneThree.style.cursor = "row-resize";
}
// 点击放大缩小
let fangdaButton = document.getElementsByClassName('fangda')[0];
fangdaButton.onclick = () => {
paneBottom.style.height = '100%'
}
// 点击展示文件
let isShowFile = document.getElementsByClassName('isShowFile')[0];
isShowFile.onclick = () => {
paneone.style.width = `15%`;
}
// 点击ctrl 展示终端
document.onkeydown = (event) => {
let e = event || window.event || arguments.callee.caller.arguments[0];
if ( e.ctrlKey) {
paneBottom.style.display = 'block'
}
}
</script>
</html>
