vue-drag-resize（可拖动/调整大小的元素的 Vue 第三方库）

安装和基本使用

npm i -s vue-drag-resize

引入

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

eg:

<template>
    <div id="app">
        <VueDragResize :isActive="true" :w="200" :h="200" @resizing="resize" @dragging="resize">
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }} </p>
            <p>{{ width }} х {{ height }}</p>
        </VueDragResize>
    </div>
</template>

<script>
    import VueDragResize from 'vue-drag-resize';
    export default {
        name: 'app',
        components: {
            VueDragResize
        },
        data() {
            return {
                width: 0,
                height: 0,
                top: 0,
                left: 0
            }
        },
        methods: {
            // 拖拽时可以确定元素位置
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }
</script>

属性

isActive
组件是否应处于活动状态

<vue-drag-resize :isActive="true">
preventActiveBehavior
单击组件并单击组件区域外部来禁用组件的行为（isActive：true / false）。

<vue-drag-resize :preventActiveBehavior="true">
parentW + parentH
定义父元素的初始宽度。 未指定，则自动计算。
使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。

<vue-drag-resize :parentW="2000" :parentH="2000">
parentScaleX + parentScaleY
定义初始水平比例或父元素。父级的transform:scale（）css定义中的值相同。
拖动/调整大小和杆的大小将使用该值计算。

<vue-drag-resize :parentScaleX="0.5" :parentScaleY="0.5">
//default 1
isDraggable
组件是否应可拖动

<vue-drag-resize :isDraggable="false">
isResizable
组件是否应调整大小。

<vue-drag-resize :isResizable="false">
parentLimitation
将组件更改的范围限制为其父大小。

<vue-drag-resize :parentLimitation="true">
snapToGrid
组件是否应在预定义的步骤中移动和调整大小

<vue-drag-resize :snapToGrid="true">
gridX + gridY
定义水平轴的网格步长。组件的两侧（左、右）都将与此步骤对齐。

<vue-drag-resize :snapToGrid="true" :gridX="20" :gridY="20">
aspectRatio
组件是否应保持其比例。

<vue-drag-resize :aspectRatio="false">
w + h
组件的初始宽度+高度。

<vue-drag-resize :w="200"  :h="200">
minw + minh
组件的最小高度 + 最小宽度。

<vue-drag-resize :minh="50" :minw="50">
x + y + z
组件的初始XYZ位置。

<vue-drag-resize :x="0" :y="0" :z="999">
stickSize
锚点的大小

<vue-drag-resize :stickSize="12"> 
//default=8
sticks
定义句柄数组以限制元素大小调整：

tl - Top left
tm - Top middle
tr - Top right
mr - Middle right
br - Bottom right
bm - Bottom middle
bl - Bottom left
ml - Middle left
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
<vue-drag-resize :sticks="['tm','bm','ml','mr']">
axis
元素可拖动的轴。 可用值为x，y，both或none。

<vue-drag-resize axis="x">
//String
dragHandle
应该用于拖动组件的选择器。

<vue-drag-resize dragHandle=".drag">
dragCancel
应该用于防止拖动初始化的选择器。

<vue-drag-resize dragCancel=".drag">
contentClass
定义一个应用于 div 上的类

事件

<vue-drag-resize contentClass="box-shaddow">
Events(事件)
clicked - 单击组件时调用。
<vue-drag-resize @clicked="onActivated">
activated - 单击组件时调用，以显示句柄。
<vue-drag-resize @activated="onActivated">
deactivated - 用户单击组件外部的任何位置时调用，以便将其停用。
<vue-drag-resize @deactivated="onDeactivated">
resizing - 组件调整大小时调用。
//Parameters: object
{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

<vue-drag-resize @resizing="onResizing">
resizestop - 组件停止调整大小时调用。
//Parameters: object
{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

<vue-drag-resize @resizestop="onResizstop">
dragging - 拖动组件时调用
//Parameters: object //参数
{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}
dragstop - 组件停止拖动时调用。
<vue-drag-resize @dragstop="onDragstop">