SuitDragResizeBox 任意拖拽调整大小容器

SuitDragResizeBox 是一个的可调整大小可拖拽的组件，它可以让用户根据需要调整组件的大小。

示例

drag

tests

<template>
  <div style="width:100%;height:300px;border:1px red solid;">
  <suit-drag-resize-box
      drag-selector=".drag"
      :active="actives"
      style="background:yellow"
    >
      <div class="drag">drag</div>
      <div class="resizable-content">
        <div style="width: 100%; height: 100%; background: blue">tests</div>
      </div>
    </suit-drag-resize-box>
  </div>
</template>
<script>
export default {
    data() {
        return {
            actives: ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'],
        }
    }
}
</script>

Expand Copy Copy

Props

Property	Data attribute	Type	Default	Description
width	w	[Number, String]	undefined	Width in pixel or 'auto'
minWidth	minW	Number	0	Minimum width
maxWidth	maxW	Number	undefined	Maximum width
height	h	[Number, String]	undefined	Height in pixel, or 'auto'
minHeight	minH	Number	0	Minimum height
maxHeight	maxH	Number	undefined	Maximum height
left	l	[Number, String]	0	Offset left from parent
top	t	[Number, String]	0	Offset top from parent
active		Array	['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt']	Active handlers for resize
fitParent		Boolean	false	Respect parent's size on resizing
dragSelector	dragElements	String	undefined	Drag selector
maximize		Boolean	false	Maximize element to parent size
disableAttributes	calcMap	Array	[]	Disable changes to attributes, Available values: ['l', 't', 'w', 'h']

Events

Name	Payload	Description
mount	[eventName,left,top,width,height]	Called after the component is mounted
destroy	[eventName,left,top,width,height]	Called before the component is destroyed
resize:start	[eventName,left,top,width,height]	Called after clicking on one of the active handlers
resize:move	[eventName,left,top,width,height]	Called when a handler is being dragged
resize:end	[eventName,left,top,width,height]	Called when the mouse button was released after resize
drag:start	[eventName,left,top,width,height]	Called after clicking on one of the drag elements
drag:move	[eventName,left,top,width,height]	Called when a drag element is being dragged
drag:end	[eventName,left,top,width,height]	Called when the mouse button was released after drag
maximize	[eventName,left,top,width,height, state]	Called when "maximize" state changed