React实现拖拽改变宽度

最新推荐文章于 2024-06-26 10:30:02 发布

世间万物皆对象

最新推荐文章于 2024-06-26 10:30:02 发布

阅读量1.4k

点赞数

分类专栏： react 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/ZTAHNG/article/details/126251547

版权

react 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

插件

使用了第三方插件 re-resizable用React组件可以很便捷的实现可拖拽改变组件宽度高度。
安装方法
yarn add re-resizable
或
npm install re-resizable

属性

参数	说明	类型
defaultSize	初始默认宽高	string / number
minWidth	宽度下限	string / number
minHeight	高度下限	string / numberr
maxWidth	宽度上限	string / number
maxHeight	高度上限	string / number
bounds	指定边界大小	window / parent / HTMLElement

示例

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

export default class Demo extends Component {

    render() {
        return (
            <Resizable
                style={{background: "#8cdbd5"}}
                defaultSize={{width:320, height:200}}
              
            >
               111111111
            </Resizable>
        );
    }
}