vue-drag-resize draggable zoom element component

1. Installation

npm i -s vue-drag-resize

2. Use

<template>
  <div class="screen-content">
    <vue-drag-resize w="200" :h="200" @resizing="resize" @dragging="resize" contentClass="resize-box">
      <p>{<!-- -->{ top }} х {<!-- -->{ left }}</p>
      <p>{<!-- -->{ width }} х {<!-- -->{ height }}</p>
    </vue-drag-resize>
  </div>
</template>

<script>
  import VueDragResize from 'vue-drag-resize'
  export default {
    name: 'test',
    data() {
      return {
        width: 0,
        height: 0,
        top: 0,
        left: 0
      }
    },
    components: {
      VueDragResize
    },
    methods: {
      resize(newRect) {
        this.width = newRect.width;
        this.height = newRect.height;
        this.top = newRect.top;
        this.left = newRect.left;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .screen-content {
    width: 1280px;
    height: 720px;
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: #fff9f5;
    .resize-box {
      background-color: skyblue;
    }
  }
</style>

3. Parameters

Parameters	Description	Type	Default value
isActive	Is it active	Boolean	false
isDraggable	Whether dragging is allowed	Boolean	true
isResizable	Whether scaling is allowed	Boolean	true
preventActiveBehavior	Whether to disable component behavior by clicking on the component and clicking outside the component area	Boolean	false
parentW	parent Width, defines the initial width of the parent element, automatically calculated if not specified	Number	0
parentH	Parent height, defines the initial height of the parent element, automatically calculated if not specified	Number	0
parentScaleX	Parent horizontal proportion, defines the initial horizontal proportion of the parent element	Number	1
parentScaleY	Parent vertical proportion, defines the initial vertical proportion of the parent element	Number	1
parentLimitation	Whether it exceeds the parent element and limits the scope of component changes to its parent size, that is Limit the operation component to not exceed the parent element	Boolean	false
snapToGrid	Whether to move equidistantly, determines whether the component should be moved and resized in predefined steps	Boolean	false
gridX	X-axis grid step	Number	50
gridY	Y-axis grid step	Number	50
aspectRatio	Whether to scale proportionally	Boolean	false
x	Positioning horizontal distance	Number	0
y	Positioning vertical distance	Number	0
z	Positioning level	Number	auto
w	Component width, the value can be a number >= 0 or the string “auto”. If set to “auto”, the initial height value will be equal to the height of the content in the component	Number, String	200
h	Component height, the value can be a number >= 0 or the string “auto”, if set to “auto”, the initial height value will be equal to the component The height of the content	Number, String	200
minw	Minimum width, cannot be set to 0	Number	50
minh	Minimum height, cannot be set to 0	Number	50
sticks	Nodes that define the scaling of elements	Array	[‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]
stickSize	Define the size of the node	Number	8
axis	Allow drag direction	String	x, y , both, none, default both
dragHandle	The definition should be used for dragging Selector for moving components	String	Example: dragHandle=”.drag”
dragCancel	Define the selector that should be initialized with drag blocking	String	Example: dragHandle=”.drag”
contentClass	Define a class that applies to div	String	Example: contentClass=”xxx”

4. Event

Name	Description	Callback parameters
clicked	Component click event
activated	Component activation event
deactivated	Component deactivation event
resizing	Events when zooming	{ left: Number, top: Number, width: Number, height:Number }
resizestop	Event when scaling ends	Same as above
dragging	Drag event	Same as above
dragstop	Drag end event	Same as above

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeVue componentsGlobal and local components 37254 people are learning the system