<template>
|
<PageWrapper :class="`${prefixCls}`" dense contentFullHeight fixedHeight>
|
<!-- <slot name="left">-->
|
<!-- <div class="leftBox">侧边栏</div>-->
|
<!-- <div class="centerBox">-->
|
<!-- <!– 此处可以换为其他icon –>-->
|
<!-- <span class="iconBox">66</span>-->
|
<!-- </div>-->
|
<!-- </slot>-->
|
<!-- <slot name="right">-->
|
<!-- <div class="rightBox">主栏</div>-->
|
<!-- </slot>-->
|
<div class="bigBox">
|
<div class="leftBox">侧边栏</div>
|
<!--拖拽-->
|
<div class="centerBox">
|
<!-- 此处可以换为其他icon -->
|
<span class="iconBox">66</span>
|
</div>
|
<div class="rightBox">主栏</div>
|
</div>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import {PageWrapper} from '@/components/Page';
|
import {onMounted} from 'vue';
|
import {useDesign} from "@/hooks/web/useDesign";
|
|
onMounted(() => {
|
dragControllerLR();
|
});
|
const {prefixCls} = useDesign('email');
|
//拖拽
|
const dragControllerLR = () => {
|
const resize = document.querySelector('.centerBox .iconBox') as any;
|
const left = document.querySelector('.leftBox') as any;
|
const box = document.querySelector('.bigBox') as any;
|
// 鼠标按下事件
|
resize.onmousedown = function (e: MouseEvent) {
|
//颜色改变提醒
|
const startX = e.clientX;
|
resize.left = resize.offsetLeft;
|
// 鼠标拖动事件
|
document.onmousemove = function (e) {
|
const endX = e.clientX;
|
let moveLen = resize.left + (endX - startX) - box.offsetLeft; // （endx-startx）=移动的距离。resize.left+移动的距离=左边区域最后的宽度
|
|
const maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
|
|
if (moveLen < 200) moveLen = 200; // 左边区域的最小宽度为270px
|
if (moveLen > maxT - 500) moveLen = maxT - 500; //右边区域最小宽度为500px
|
|
resize.style.left = moveLen; // 设置左侧区域的宽度
|
left.style.width = moveLen + 'px';
|
};
|
// 鼠标松开事件
|
// eslint-disable-next-line no-unused-vars
|
document.onmouseup = function (evt) {
|
//颜色恢复
|
document.onmousemove = null;
|
document.onmouseup = null;
|
resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
|
};
|
resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
|
return false;
|
};
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@prefix-cls: ~'@{namespace}-email';
|
.@{prefix-cls} {
|
.bigBox {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
|
.leftBox {
|
height: 100%;
|
width: 270px;
|
border: 1px solid red;
|
}
|
|
.centerBox {
|
width: 8px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: transparent;
|
|
.iconBox {
|
transform: rotate(90deg);
|
font-size: 16px;
|
cursor: w-resize;
|
|
&:hover {
|
color: red;
|
}
|
}
|
}
|
|
.rightBox {
|
height: 100%;
|
flex: 1;
|
border: 1px solid red;
|
}
|
}
|
}
|
</style>
|
