可拖拽布局组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React from 'react' ; import style from './index.module.scss' ; const icon = `<svg t= "1587390375993" class = "icon" viewBox= "0 0 1024 1024" version= "1.1" xmlns= "http://www.w3.org/2000/svg" p-id= "893" width= "200" height= "200" ><path d= "M912 512c0 7.7-2.8 14.5-8.5 20.1L789.3 646.5c-5.6 5.6-12.4 8.5-20.1 8.5-7.7 0-14.5-2.8-20.1-8.5-5.6-5.6-8.5-12.3-8.5-20.1v-57.2H283.5v57.2c0 7.7-2.8 14.5-8.5 20.1-5.6 5.6-12.4 8.5-20.1 8.5-7.7 0-14.5-2.8-20.1-8.5L120.5 532c-5.6-5.6-8.5-12.3-8.5-20.1 0-7.7 2.8-14.5 8.5-20.1l114.3-114.3c5.6-5.6 12.3-8.5 20.1-8.5 7.7 0 14.5 2.8 20.1 8.5 5.6 5.6 8.5 12.4 8.5 20.1v57.2h457.2v-57.2c0-7.7 2.8-14.5 8.5-20.1 5.6-5.6 12.3-8.5 20.1-8.5 7.7 0 14.5 2.8 20.1 8.5l114.4 114.3c5.4 5.7 8.2 12.5 8.2 20.2z" p-id= "894" ></path></svg>`; export default (props: { /** 初始左侧宽度 */ initLeftConnWidth?: number; /** 左侧显示对象 */ liftChild: React.ReactChild; /** 右侧显示对象 */ rightChild: React.ReactChild; }) => { const [leftConnWidth, setLeftConnWidth] = React.useState(props.initLeftConnWidth || 200) const onMouseDownAdjust = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const oldScreenX = e.screenX; const oldWidth = leftConnWidth; const mask = document.createElement( 'div' ); mask.className = style.shelfMask; window.top.document.body.appendChild(mask); mask.addEventListener( 'mousemove' , onmousemove); mask.addEventListener( 'mouseup' , onmouseup); /** 移动鼠标 */ function onmousemove(e1) { let newWidth = oldWidth + (e1.screenX - oldScreenX); if (newWidth < 0) { newWidth = 0; } if (newWidth > 1000) { newWidth = 1000; } setLeftConnWidth(newWidth); } function onmouseup() { mask.removeEventListener( 'mousemove' , onmousemove); mask.removeEventListener( 'mouseup' , onmouseup); window.top.document.body.removeChild(mask); } } return ( <div className={style.shelf} > <div className={style.leftConn} style={{ width: leftConnWidth }} > {props.liftChild} </div> <i className={style.adjust} dangerouslySetInnerHTML={{ __html: icon }} onMouseDown={onMouseDownAdjust} ></i> <div className={style.rightConn} > {props.rightChild} </div> </div> ) } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步