调整大小 Resizable

示例

基本形式

<resizable>
    <div class="m-panel m-panel-info">
        <div class="panel_bd">将鼠标移到Panel边缘处，尝试调整大小。</div>
    </div>
</resizable>

.m-panel {box-sizing: border-box; width: 100%; height: 100%;}

设置句柄

<resizable handles={['bottom', 'right', 'bottomright']}>
    <div class="m-panel m-panel-info">
        <div class="panel_bd">将鼠标移到Panel边缘处，尝试调整大小。</div>
    </div>
</resizable>

句柄类型

<div class="g-row">
    <div class="g-col g-col-6">
        <resizable handleType="square">
            <div class="m-panel m-panel-info">
                <div class="panel_bd">将鼠标移到Panel边缘处，尝试调整大小。</div>
            </div>
        </resizable>
    </div>
    <div class="g-col g-col-6">
        <resizable handleType="debug">
            <div class="m-panel m-panel-info">
                <div class="panel_bd">将鼠标移到Panel边缘处，尝试调整大小。</div>
            </div>
        </resizable>
    </div>
</div>

最小值和最大值

<resizable minWidth="200" minHeight="100" maxWidth="300" maxHeight="200">
    <div class="m-panel m-panel-info">
        <div class="panel_bd">将鼠标移到Panel边缘处，尝试调整大小。</div>
    </div>
</resizable>

API

Class

Resizable

继承自。

Options

new Resizable()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.left`	number	`0`	outside <=> inside	水平位置
`data.top`	number	`0`	outside <=> inside	垂直位置
`data.width`	number	`300`	outside <=> inside	宽度
`data.height`	number	`200`	outside <=> inside	高度
`data.minWidth`	number	`0`	outside => inside	最小宽度
`data.minHeight`	number	`0`	outside => inside	最小高度
`data.maxWidth`	number	`Infinity`	outside => inside	最大宽度
`data.maxHeight`	number	`Infinity`	outside => inside	最大高度
`data.range`	string object Element function		outside @=> inside	拖拽范围。值可以为一个{left,top,right,bottom}格式的对象，表示代理元素移动的上下左右边界。当值为`offsetParent`，拖拽时代理元素限制在offsetParent中移动；当值为`parent`；当值为。也可以直接传入一个元素或函数。
`data.handles`	Array	`[...]`	outside => inside	句柄
`data.handleType`	string	`''`	outside => inside	句柄类型
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.class`	string	`''`	outside => inside	补充class

Events

resizable.$on('resize')

调整大小时触发

属性	类型	描述
`sender`	object	事件发送对象
`left`	number	水平位置
`top`	number	垂直位置
`width`	number	宽度
`height`	number	高度