小记-526互联

1.路由跳转及传参

import { withRouter, RouteComponentProps } from 'react-router';

class ReplenishmentOrder extends Component<
    TProps & RouteComponentProps,
    TState
> {
    constructor(props: RouteComponentProps) {
        super(props);
        this.state = {};
    }


    handelInfo() {
        console.log(this);
        this.props.history.push({
            pathname: '/bill/replenishment-order/info',
            state: { isInfo: true },
        });
    }
    render() {
        return (
            <StyledDiv>
                <Table
                    rowKey={'id'}
                    columns={this.columns}
                    fetcher={undefined}
                    params={this.params}
                    headerBtns={
                        <Button onClick={this.handelInfo.bind(this)}>
                            详情
                        </Button>
                    }
                ></Table>
            </StyledDiv>
        );
    }
}
export default withRouter(ReplenishmentOrder);




//获取
this.props.location.state, '参数----'

2.元素添加可拖动缩放功能

https://blog.csdn.net/Cs_Mervyn/article/details/123682347

https://blog.csdn.net/xidianyueyong/article/details/81357139

css
   .react-resizable {
        position: relative;
    }
    .react-resizable-handle {
        /* position: absolute;
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-origin: content-box;
        box-sizing: border-box;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
        background-position: bottom right;
        padding: 0 3px 3px 0; */
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
    }
    .react-resizable-handle-sw {
        bottom: 0;
        left: 0;
        cursor: sw-resize;
        transform: rotate(90deg);
    }
    .react-resizable-handle-se {
        bottom: 0;
        right: 0;
        cursor: se-resize;
    }
    .react-resizable-handle-nw {
        top: 0;
        left: 0;
        cursor: nw-resize;
        transform: rotate(180deg);
    }
    .react-resizable-handle-ne {
        top: 0;
        right: 0;
        cursor: ne-resize;
        transform: rotate(270deg);
    }
    .react-resizable-handle-w,
    .react-resizable-handle-e {
        /* top: 50%; */
        /* margin-top: -10px; */
        cursor: ew-resize;
    }
    .react-resizable-handle-w {
        left: 0;
        transform: rotate(135deg);
    }
    .react-resizable-handle-e {
        /* right: 0; */
        right: -5px;
        /* transform: rotate(315deg); */
    }
    .react-resizable-handle-n,
    .react-resizable-handle-s {
        left: 50%;
        margin-left: -10px;
        cursor: ns-resize;
    }
    .react-resizable-handle-n {
        top: 0;
        transform: rotate(225deg);
    }
    .react-resizable-handle-s {
        bottom: 0;
        transform: rotate(45deg);
    }

组件封装

import { Component } from 'react';
import { Resizable } from 'react-resizable';
import styled from 'styled-components';
type TProps = {
    axis?: string; //   改变轴
    width?: number; //宽度 0 为不限制
    height?: number; //高度 0 为不限制
    resizeHandles?: string; // 拖动方向  's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'; // 拖拽句柄的类型，对应单词 south | west | east | north 首字母
    minConstraints?: number[]; //最小尺寸 值为0时默认100%
    maxConstraints?: number[]; //最大尺寸  值为0时默认100%
};
type TState = {
    axis: string;
    width: number;
    height: number;
};
const ResizeStyle = styled.div`
    flex-shrink: 0;
    .react-resizable {
        width: 100% !important;
        height: 100% !important;
        padding-top: 24px;
        flex-shrink: 0 !important;
    }
`;

export default class ResizableBox extends Component<TProps, TState> {
    constructor(props: TProps) {
        super(props);
        this.state = {
            axis: this.props.axis || 'x',
            width: this.props.width || 0,
            height: this.props.height || 0,
        };
    }
    onResize = (event, { node, size, handle }) => {
        console.log(size);

        this.setState({ width: size.width, height: size.height });
    };
    render() {
        return (
            <ResizeStyle
                style={{
                    width: this.state.width || '100%',
                    height: this.state.height || '100%',
                }}
            >
                <Resizable
                    width={this.state.width}
                    height={this.state.height}
                    axis={this.props.axis}
                    resizeHandles={[this.props.resizeHandles]}
                    minConstraints={this.props.minConstraints || [100, 100]}
                    maxConstraints={this.props.maxConstraints || [1000, 1000]}
                    onResize={this.onResize}
                >
                    {this.props.children}
                </Resizable>
            </ResizeStyle>
        );
    }
}

使用

<ResizableBox
    axis='x'
    width={160}
    resizeHandles='e'
    minConstraints={[120, 0]}
>
    <div className='left-menu'>
        <LeftMenu
            change={this.menuChange.bind(this)}
            active={this.state.menuActive}
            data={this.state.menuData}
        ></LeftMenu>
    </div>
</ResizableBox>