iLove-Coding/deformation

创造一片可以 拖动 并且 可以随意改变大小 的区域

deformation

自由拖动缩放组件.

特点

• 没有依赖包
• 可以拖动 位置 和 大小
• 可以设定大小调整范围
• 可以限制元素只能在父组件内拖动
• 可以自定义网格
• 可以限制元素只能水平 或 竖直拖动

实例

---

安装 及 使用

$ npm install --save deformation

注册组件

import Vue from 'vue'
import deformation from 'deformation'

Vue.component('Deformation', deformation)

使用组件

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <Deformation :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </Deformation>
  </div>
</template>

<script>
import Deformation from 'deformation'

export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  components: {
    Deformation
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

参数

draggable

类型: Boolean 或 Number
必要性: false
默认值: true

定义组件是否可以拖动.

参数值	效果
true	组件可以在x轴,y轴方向自由拖动
false	组件无法拖动
0	组件无法拖动
1	组件可以在x轴,y轴方向自由拖动
2	组件可以在x轴方向自由拖动
3	组件可以在y轴方向自由拖动

<Deformation :draggable="false">

resizable

类型: Boolean 或 Number
必要性: false
默认值: true

定义组件是否可以调整大小.

参数值	效果
true	组件可以在x轴,y轴方向调整大小
false	组件无法拖动
0	组件无法拖动
1	组件可以在x轴,y轴方向调整大小
2	组件可以在x轴方向调整大小
3	组件可以在y轴方向调整大小

<Deformation :resizable="false">

w

类型: Number
必要性: false
默认值: 200

定义组件的初始宽度.

<Deformation :w="200">

h

类型: Number
必要性: false
默认值: 200

定义组件的初始高度.

<Deformation :h="200">

minw

类型: Number
必要性: false
默认值: 50

定义组件的最小宽度.

<Deformation :minw="50">

minh

类型: Number
必要性: false
默认值: 50

定义组件的最小高度.

<Deformation :minh="50">

x

类型: Number
必要性: false
默认值: 0

定义组件初始横轴坐标.

<Deformation :x="0">

y

类型: Number
必要性: false
默认值: 0

定义组件初始纵轴坐标.

<Deformation :y="0">

grid

类型: Array
必要性: false
默认值: [1,1]

定义组件网格.

<Deformation :grid="[1,1]">

restrain

类型: Number
必要性: false
默认值: 0

约束元素宽高只能是restrain的倍数.

<Deformation :restrain="100">

---

parent

类型: Boolean
必要性: false
默认值: false

限制元素只能在父元素内拖动

<Deformation :parent="true">

---

Events

activated

必要性: false
Parameters: -

组件被初始化事件.

<Deformation @activated="onActivated">

deactivated

必要性: false
Parameters: -

组件被销毁事件.

<Deformation @deactivated="onDeactivated">

resizing

必要性: false
Parameters:

• left 组件 X 轴坐标
• top 组件 Y 轴坐标
• width 组件宽度
• height 组件高度

组件大小改变事件.

<Deformation @resizing="onResizing">

resizestop

必要性: false
Parameters:

• left 组件 X 轴坐标
• top 组件 Y 轴坐标
• width 组件宽度
• height 组件高度

组件大小改变结束事件.

<Deformation @resizestop="onResizstop">

dragging

必要性: false
Parameters:

• left 组件 X 轴坐标
• top 组件 Y 轴坐标

组件拖动事件.

<Deformation @dragging="onDragging">

dragstop

必要性: false
Parameters:

• left 组件 X 轴坐标
• top 组件 Y 轴坐标

组件拖动结束事件.

keydown

必要性: false
Parameters:

• event 键值

按键事件.

<Deformation @dragstop="onDragstop">