lm-sign-area

拖动合同签署区域组件

Usage no npm install needed!

<script type="module">
  import lmSignArea from 'https://cdn.skypack.dev/lm-sign-area';
</script>

README

lm-sign-area

自由拖动缩放组件.

特点

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

实例


安装 及 使用

$ npm install --save lm-sign-area

注册组件

import Vue from 'vue'
import signArea from 'lm-sign-area'

Vue.component('signArea', signArea)

使用组件

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <sign-area :w="200" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true" :resizable="false">
        X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </sign-area>
  </div>
</template>

<script>
import signArea from 'lm-sign-area'

export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  components: {
    signArea
  },
  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

类型: BooleanNumber
必要性: false
默认值: true

定义组件是否可以拖动.

参数值      效果        
true 组件可以在x轴,y轴方向自由拖动
false 组件无法拖动
0 组件无法拖动
1 组件可以在x轴,y轴方向自由拖动
2 组件可以在x轴方向自由拖动
3 组件可以在y轴方向自由拖动
<sign-area :draggable="false">

resizable

类型: BooleanNumber
必要性: false
默认值: true

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

参数值      效果        
true 组件可以在x轴,y轴方向调整大小
false 组件无法拖动
0 组件无法拖动
1 组件可以在x轴,y轴方向调整大小
2 组件可以在x轴方向调整大小
3 组件可以在y轴方向调整大小
<sign-area :resizable="false">

w

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

定义组件的初始宽度.

<sign-area :w="200">

h

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

定义组件的初始高度.

<sign-area :h="200">

minw

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

定义组件的最小宽度.

<sign-area :minw="50">

minh

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

定义组件的最小高度.

<sign-area :minh="50">

x

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

定义组件初始横轴坐标.

<sign-area :x="0">

y

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

定义组件初始纵轴坐标.

<sign-area :y="0">

grid

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

定义组件网格.

<sign-area :grid="[1,1]">

restrain

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

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

<sign-area :restrain="100">

parent

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

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

<sign-area :parent="true">

Events

activated

必要性: false
Parameters: -

组件被初始化事件.

<sign-area @activated="onActivated">

deactivated

必要性: false
Parameters: -

组件被销毁事件.

<sign-area @deactivated="onDeactivated">

resizing

必要性: false
Parameters:

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

组件大小改变事件.

<sign-area @resizing="onResizing">

resizestop

必要性: false
Parameters:

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

组件大小改变结束事件.

<sign-area @resizestop="onResizstop">

dragging

必要性: false
Parameters:

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

组件拖动事件.

<sign-area @dragging="onDragging">

dragstop

必要性: false
Parameters:

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

组件拖动结束事件.

keydown

必要性: false
Parameters:

  • event 键值

按键事件.

<sign-area @dragstop="onDragstop">