React实现拖拽改变宽度

世间万物皆对象

发布于 2024-03-20 20:08:58

1190

发布于 2024-03-20 20:08:58

文章被收录于专栏：startstart

插件

使用了第三方插件 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>
        );
    }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

react