| 提交 | 用户 | age | ||
| 28c484 | 1 | <template> |
| S | 2 | <PageWrapper :class="`${prefixCls}`" dense contentFullHeight fixedHeight> |
| 3 | <!-- <slot name="left">--> | |
| 4 | <!-- <div class="leftBox">侧边栏</div>--> | |
| 5 | <!-- <div class="centerBox">--> | |
| 6 | <!-- <!– 此处可以换为其他icon –>--> | |
| 7 | <!-- <span class="iconBox">66</span>--> | |
| 8 | <!-- </div>--> | |
| 9 | <!-- </slot>--> | |
| 10 | <!-- <slot name="right">--> | |
| 11 | <!-- <div class="rightBox">主栏</div>--> | |
| 12 | <!-- </slot>--> | |
| 13 | <div class="bigBox"> | |
| 14 | <div class="leftBox">侧边栏</div> | |
| 15 | <!--拖拽--> | |
| 16 | <div class="centerBox"> | |
| 17 | <!-- 此处可以换为其他icon --> | |
| 18 | <span class="iconBox">66</span> | |
| 19 | </div> | |
| 20 | <div class="rightBox">主栏</div> | |
| 21 | </div> | |
| 22 | </PageWrapper> | |
| 23 | </template> | |
| 24 | ||
| 25 | <script lang="ts" setup> | |
| 26 | import {PageWrapper} from '@/components/Page'; | |
| 27 | import {onMounted} from 'vue'; | |
| 28 | import {useDesign} from "@/hooks/web/useDesign"; | |
| 29 | ||
| 30 | onMounted(() => { | |
| 31 | dragControllerLR(); | |
| 32 | }); | |
| 33 | const {prefixCls} = useDesign('email'); | |
| 34 | //拖拽 | |
| 35 | const dragControllerLR = () => { | |
| 36 | const resize = document.querySelector('.centerBox .iconBox') as any; | |
| 37 | const left = document.querySelector('.leftBox') as any; | |
| 38 | const box = document.querySelector('.bigBox') as any; | |
| 39 | // 鼠标按下事件 | |
| 40 | resize.onmousedown = function (e: MouseEvent) { | |
| 41 | //颜色改变提醒 | |
| 42 | const startX = e.clientX; | |
| 43 | resize.left = resize.offsetLeft; | |
| 44 | // 鼠标拖动事件 | |
| 45 | document.onmousemove = function (e) { | |
| 46 | const endX = e.clientX; | |
| 47 | let moveLen = resize.left + (endX - startX) - box.offsetLeft; // （endx-startx）=移动的距离。resize.left+移动的距离=左边区域最后的宽度 | |
| 48 | ||
| 49 | const maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度 | |
| 50 | ||
| 51 | if (moveLen < 200) moveLen = 200; // 左边区域的最小宽度为270px | |
| 52 | if (moveLen > maxT - 500) moveLen = maxT - 500; //右边区域最小宽度为500px | |
| 53 | ||
| 54 | resize.style.left = moveLen; // 设置左侧区域的宽度 | |
| 55 | left.style.width = moveLen + 'px'; | |
| 56 | }; | |
| 57 | // 鼠标松开事件 | |
| 58 | // eslint-disable-next-line no-unused-vars | |
| 59 | document.onmouseup = function (evt) { | |
| 60 | //颜色恢复 | |
| 61 | document.onmousemove = null; | |
| 62 | document.onmouseup = null; | |
| 63 | resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 | |
| 64 | }; | |
| 65 | resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获 | |
| 66 | return false; | |
| 67 | }; | |
| 68 | }; | |
| 69 | </script> | |
| 70 | ||
| 71 | <style lang="less" scoped> | |
| 72 | @prefix-cls: ~'@{namespace}-email'; | |
| 73 | .@{prefix-cls} { | |
| 74 | .bigBox { | |
| 75 | width: 100%; | |
| 76 | height: 100%; | |
| 77 | display: flex; | |
| 78 | flex-direction: row; | |
| 79 | ||
| 80 | .leftBox { | |
| 81 | height: 100%; | |
| 82 | width: 270px; | |
| 83 | border: 1px solid red; | |
| 84 | } | |
| 85 | ||
| 86 | .centerBox { | |
| 87 | width: 8px; | |
| 88 | height: 100%; | |
| 89 | display: flex; | |
| 90 | align-items: center; | |
| 91 | justify-content: center; | |
| 92 | background: transparent; | |
| 93 | ||
| 94 | .iconBox { | |
| 95 | transform: rotate(90deg); | |
| 96 | font-size: 16px; | |
| 97 | cursor: w-resize; | |
| 98 | ||
| 99 | &:hover { | |
| 100 | color: red; | |
| 101 | } | |
| 102 | } | |
| 103 | } | |
| 104 | ||
| 105 | .rightBox { | |
| 106 | height: 100%; | |
| 107 | flex: 1; | |
| 108 | border: 1px solid red; | |
| 109 | } | |
| 110 | } | |
| 111 | } | |
| 112 | </style> | |
