首页 > 其他分享 >小记

小记

时间:2023-08-18 14:34:49浏览次数:56  
标签:handle resizable height react width props 小记

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>

 

标签:handle,resizable,height,react,width,props,小记
From: https://www.cnblogs.com/sclweb/p/17640411.html

相关文章

  • 8.18 模拟赛小记 & 学习
    谔谔谔谔。菜翻天。今天模拟赛题目传送门。A.跳蚤市场(mid)话说我才看到这个英文名字叫mid。然后就是手写lower_bound和upper_bound优化前缀和。B.组合问题(anm)这个错排之前上课讲过于是一眼了。可惜没看longlong祖宗十八代都被炸死了。C.旅行(day)图论题。D.购物(t......
  • 「Log」2023.8.17 小记
    序幕早上到校先摆,然后开调代码。大分块对拍调调调。学长开始讲平衡树。平衡树平衡树平衡树!学完了,点午饭吃午饭。学主席树。主席树主席树主席树!学完了点晚饭吃完饭。用chatGPT写了点文章,乐坏了。继续卡常。\(\color{black}{P4119\[Ynoi2018]\未来日记}\)详见「「No......
  • 「Log」2023.8.16 小记
    序幕早上昏迷,九点才到校,少听了四道题,问题不大。点咖啡喝。SAM题也抽象。线段树合并,不会。写个AC自动机板子。\(\color{royalblue}{P3808\【模板】AC\自动机(简单版)}\)板子。\(\text{Link}\)\(\color{royalblue}{P3796\【模板】AC\自动机(加强版)}\)板子。\(\text{Li......
  • 恋爱小记
    也不知道为啥要写,就是当给自己看的,并作为纪念,以后纪念日能找素材?8.14rp极高划水8.15rp极低,遵循rp守恒上午她说自己静静,然后一个小时后心态崩溃说分手,我知道她肯定乱想了,然后我拼命拉,把我能想到的方法都试了,最后还是我说,你要分,将来等着吧(把她吓到了)。然后才慢慢跟我说了......
  • 「Log」2023.8.15 小记
    序幕七点多到校,整理博客,开始调昨天没整完的题。手算哈希,把所有部分都先改成暴力。好消息,暴力没问题,准备改成正解。学长开始讲课,AC自动机,秒了。接着调题,过了。开心。\(\color{royalblue}{P9399\「DBOI」Round\1\人生如树}\)考虑用哈希判断两个序列是否相等,偏移量可以预......
  • YsOI2023 小记
    D2T1签。#include<cstdio>usingnamespacestd;intread(){/*...*/}typedeflonglongll;voidsolve(){ lln=read()-1,x=read(); lly=x; while(~y&1)y>>=1; for(inti=1;i<n;++i)y<<=1; if(x>y)y=x; printf("%lld\n"......
  • 定点补码乘法器小记
    目录硬件模拟软件无脑乘Booth乘法器华莱士树优化的华莱士树参考链接:《计算机体系结构基础第三版》定点补码乘法器一生一芯学习讲义一生一芯视频号硬件模拟软件软件方式即类似我们手工计算,如计算1101*0101+00001101(乘数最低位1,结果加上被乘数。将乘数右移,被乘数左移)+0......
  • 「Log」2023.8.11 小记
    间幕\(1\)从今天开始记小记。七点到校了,先小摆一会,然后整理博客。听MITiS的电音,开始写题。\(\color{blueviolet}{P1829\[国家集训队]\Crash的数字表格\/\JZPTAB}\)莫反练习题,式子并不难推,两个整除分块解决。八点整打完,开始调。忘记初始化了。筛质数pri[++pcnt]=tr......
  • spring boot自定义类中 @Autowired注入失败问题小记
    springboot自定义类中@Autowired注入失败问题小记第一种方法:@PostConstruct,大多数人使用的方式,不过对于我的问题没有用第二种方法:实现ApplicationRunner接口,在run方法执行后进行初始化第三种方法:实现ApplicationContextAware接口,直接到spring容器拿bean代码如下shiroConf......
  • 多项式小记
    先粘个\(\rmNTT\)和\(\rmFFT\)的板子。inlinevoidtimes(LL*f,LL*g,intn,intlim){ intkn=initr(n);NTT(f,kn,1);NTT(g,kn,1); for(inti=0;i<kn;i++)f[i]=f[i]*g[i]%Mod; NTT(f,kn,-1);NTT(g,kn,-1); clr(f,lim,kn);}分治\(NTT/FFT\)大概就是维护下面......