React使用“re-resizable”实现dom的拉伸缩放效果

大聪明码农徐

已于 2023-05-12 10:32:35 修改

阅读量3.8k

点赞数 3

分类专栏： React 文章标签： 1024程序员节

于 2022-11-01 14:56:36 首次发布

本文链接：https://blog.csdn.net/qq_45799465/article/details/127494686

版权

React 专栏收录该内容

22 篇文章 5 订阅

订阅专栏

一、需求

在工作中遇到一个需求，做一个类似于调试工具栏的效果，点击某个按钮呼出，并且组件可以很便捷的实现可拖拽改变组件大小。

二、插件的安装使用

插件安装：

npm install --save re-resizable

插件引入：

import { Resizable } from "re-resizable";

基本使用：

import React, {Component} from 'react';
import { Resizable } from "re-resizable";

export default class demo extends Component {
    render() {
        return (
            <Resizable
                defaultSize={{width:400, height:400}}
            >
                你好，大聪明！
            </Resizable>
        );
    }
}

常用属性：

属性	说明	数据类型
defaultSize	初始化默认宽高	`string` / `number`
minWidth / maxWidth	最小/最大宽	`string` / `number`
minHeight / maxHeight	最小/最大高	`string` / `number`
size	设置宽高的数值	object
...	...	...

三、事件

onResizeStart 调整组件开始时调用。
onResize 调整组件进行时调用。
onResizeStop 调整组件完成时调用。

代码：

import React, {Component} from 'react';
import { Resizable } from "re-resizable";

export default class Demo extends Component {

    onResizeStart = (e) => {
        console.log("onResizeStart执行");
        console.log(e);
    };
    onResize = (e) => {
        console.log("onResize执行");
        console.log(e);
    };
    onResizeStop = (e) => {
        console.log("onResizeStop执行");
        console.log(e);
    };

    render() {
        return (
            <Resizable
                style={{background: "red"}}
                defaultSize={{width:400, height:400}}
                onResize={(e) => this.onResize(e)}
                onResizeStart={(e) => this.onResizeStart(e)}
                onResizeStop={(e) => this.onResizeStop(e)}
            >
                你好，大聪明！
            </Resizable>
        );
    }
}

四、案例

这是需求完成以后，页面的整体代码。

import { Button, Icon, Tooltip } from 'antd';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { formatMessage, FormattedMessage } from 'umi-plugin-locale';
import React, { Component } from 'react';
import { Resizable } from "re-resizable";
import WebConsole from './WebConsole';
import globalUtil from '../../utils/global';
import styles from './index.less'


@connect(null, null, null, { withRef: true })
class Shell extends Component {
    constructor(props) {
        super(props)
        this.state = {
            bool: false,
            height: 400
        };
    }
    onResizeStart = (e) => {
    };
    onResize = (e) => {
    };
    // 收起隐藏
    packUpOrDown = (e) => {
        const { bool } = this.state
        if (bool) {
            this.setState({
                height: 450
            })
        } else {
            this.setState({
                height: 40
            })
        }
        this.setState({
            bool: !this.state.bool,
        })
    }
    // 退出shell终端
    terminalRepeal = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'region/terminalRepeal',
            payload: true,
        });
    }
    // 新开页
    newPage = () =>{
       const { dispatch } = this.props
        dispatch({
            type: 'region/terminalRepeal',
            payload: true,
        });
    }
    render() {
        const { bool, height } = this.state
        const eid = globalUtil.getCurrEnterpriseId();
        return (
            <Resizable
                ref="big"
                style={{ position: 'absolute', bottom: 0, zIndex: 9999 }}
                defaultSize={{ height: 400 }}
                size={{ height: height }}
                onResize={(e) => this.onResize(e)}
                onResizeStart={(e) => this.onResizeStart(e)}
                onResizeStop={(e, direction, ref, d) => {
                    this.setState({
                        height: this.state.height + d.height,
                    });
                }}
                minWidth={'100%'}
                minHeight={40}
                maxHeight={'60vh'}
            >
                <div className={styles.shell_head}>
                    <Tooltip placement="top" title={bool ? formatMessage({ id: 'otherEnterprise.shell.show' }) : formatMessage({ id: 'otherEnterprise.shell.Pack_up' })} >
                        <Button type="primary" icon={bool ? "vertical-align-top" : "vertical-align-bottom"} onClick={this.packUpOrDown} style={{ margin: '0 20px 0 0' }} />
                    </Tooltip>
                    <Link
                        to={`/enterprise/${eid}/shell`}
                        target="_blank"
                    >
                        <Tooltip placement="top" title={formatMessage({ id: 'otherEnterprise.shell.new' })} >
                            <Button type="primary" style={{ margin: '0 20px 0 0' }} icon="arrows-alt" onClick={this.newPage}>
                            </Button>
                        </Tooltip>
                    </Link>

                    <Tooltip placement="top" title={formatMessage({ id: 'otherEnterprise.shell.down' })}>
                        <Button type="primary" icon={"close"} onClick={this.terminalRepeal} style={{ margin: '0 20px 0 0' }} />
                    </Tooltip>
                </div>
                <div style={{ padding: "24px 24px 0 24px", height: "100%" }}>
                    <WebConsole height={height} />
                </div>
            </Resizable>

        );
    }
}

export default Shell;

效果：