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)

使用组件

<template>
  <div id="app">
    <VueDragResize 
    :isActive="true" 
    :w="200" 
    :h="200" 
    v-on:resizing="resize" 
    v-on: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 是否处于激活状态

类型： Boolean
必需: false
默认值： false

确定组件是否应处于活动状态。

<vue-drag-resize :isActive="true">

preventActiveBehavior 是否禁止组件行为

类型： Boolean
必需: false
默认值： false

通过单击组件并单击组件区域外部来禁用组件的行为（isActive：true / false）。
如果启用了prop，则组件仅面向指定的

<vue-drag-resize :preventActiveBehavior="true">

parentW 父级宽度

类型： Number
必需: false
默认值： 0

定义父元素的初始宽度。 如果未指定，则自动计算。
使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。

<vue-drag-resize :parentW="2000">

parentH 父级高度

类型： Number
必需: false
默认值： 0

定义父元素的初始高度。 如果未指定，则自动计算。
使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。

<vue-drag-resize :parentH="2000">

parentScaleX 父级水平比例

类型： Number
必需: false
默认值： 1

定义初始水平比例或父元素。父级的transform:scale（）css定义中的值相同。
拖动/调整大小和杆的大小将使用该值计算。

<vue-drag-resize :parentScaleX="0.5">

parentScaleY 父级垂直比例

类型： Number
必需: false
默认值： 1

定义初始垂直比例或父元素。父级的transform:scale（）css定义中的值相同。
拖动/调整大小和杆的大小将使用该值计算。

<vue-drag-resize :parentScaleX="0.5">

isDraggable 是否允许拖拽

类型： Boolean
必需: false
默认值： true

确定组件是否应可拖动。

<vue-drag-resize :isDraggable="false">

isResizable 是否允许缩放

类型： Boolean
必需: false
默认值： true

确定组件是否应可缩放。

<vue-drag-resize :isDraggable="false">

parentLimitation 是否超出父级元素

类型： Boolean
必需: false
默认值： false

将组件更改的范围限制为其父大小，即限制操作组件不能超出父级元素。

<vue-drag-resize :parentLimitation="true">

snapToGrid 是否等距离移动

类型： Boolean
必需: false
默认值： false

确定组件是否应按预定义的步骤移动和调整大小。

<vue-drag-resize :snapToGrid="true">

gridX X轴网格步长

类型： Number
必需: false
默认值： 50

定义水平轴的网格步长。组件的顶部和底部将捕捉到此步骤。

<vue-drag-resize :snapToGrid="true" :gridX="20">

gridY Y轴网格步长

类型： Number
必需: false
默认值： 50

定义垂直轴的网格步长。组件的左侧和右侧将捕捉到此步骤。

<vue-drag-resize :snapToGrid="true" :gridX="20">

aspectRatio 是否等比例缩放

类型： Boolean
必需: false
默认值： false

确定组件是否应保持其比例。
坑：定义了这个属性，发现重新设置宽高的时候出现了异常（新值比例不同于旧值），需要在重设宽高的时候把aspectRatio设置为false，再将其设置回去，才能保证新值的等比例

<vue-drag-resize :aspectRatio="false">

w 组件宽度

类型： Number || String
必需: false
默认值： 200

定义元件的初始高度。
该值可以是数字 >= 0 或字符串"auto"。如果设置为"auto"，则初始高度值将等于组件中内容的高度。

<vue-drag-resize :w="200">

h 组件高度

类型： Number || String
必需: false
默认值： 200

定义元件的初始高度。
该值可以是数字 >= 0 或字符串"auto"。如果设置为"auto"，则初始高度值将等于组件中内容的高度。

<vue-drag-resize :h="200">

minw 最小宽度

类型： Number
必需: false
默认值： 50

定义元件的最小宽度。
注意，不能设置为0，因为这个组件里面属性要求大于0。

<vue-drag-resize :minw="50">

minh 最小高度

类型： Number
必需: false
默认值： 50

定义组件的最小高度。
注意，不能设置为0，因为这个组件里面属性要求大于0。

<vue-drag-resize :minh="50">

x 定位水平距离

类型： Number
必需: false
默认值： 0

定义组件的初始x轴位置。

<vue-drag-resize :x="0">

y 定位垂直距离

类型： Number
必需: false
默认值： 0

定义组件的初始y轴位置。

<vue-drag-resize :y="0">

z 定位层次

类型： Number
必需: false
默认值： auto

定义组件的层次。
注意在元素激活的时候，z会被设置为最高的。

<vue-drag-resize :z="999">

sticks 定义元素缩放的节点

类型： Array
必需: false
默认值： [‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]

定义节点数组以限制元素大小调整。

• tl - Top left
• tm - Top middle
• tr - Top right
• mr - Middle right
• br - Bottom right
• bm - Bottom middle
• bl - Bottom left
• ml - Middle left

<vue-drag-resize :sticks="['tm','bm','ml','mr']">

stickSize 定义节点的大小

类型： Number
必需: false
默认值： 8

定义节点的大小

<vue-drag-resize :stickSize="12">

axis 允许拖拽的方向

类型： String
必需: false
默认值： both

定义元素可拖动的轴(方向)。 可用值为x、y、both、none。

<vue-drag-resize axis="x">

dragHandle

类型： String
必需: false

定义应该用于拖动组件的选择器。

<vue-drag-resize dragHandle=".drag">

dragCancel

类型： String
必需: false

定义应该用阻止拖动初始化的选择器。

<vue-drag-resize dragCancel=".drag">

contentClass

类型： String
必需: false

定义一个类，该类应用于 div。

<vue-drag-resize contentClass="box-shaddow">

事件

clicked 组件点击事件

必需: false
参数: event handler

单击组件时调用。

<vue-drag-resize @clicked="onActivated">

activated 组件点击事件

参数: 无

单击组件时调用，以显示节点。

<vue-drag-resize @clicked="onActivated">

deactivated 点击组件外事件

参数: 无

当单击组件外部的任何位置时调用，以便将其停用。

<vue-drag-resize @deactivated="onDeactivated">

resizing 缩放时事件

必需: false
参数: 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 缩放结束时

必需: false
参数: 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 拖拽时事件

必需: false
参数: 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 @dragging="onDragging">

dragstop 拖拽结束时事件

必需: false
参数: 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 @dragstop="onDragstop">