可拖拽布局组件

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>
    )
}

  

posted @   zhaoyzml  阅读(137)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示