lm-sign-area
自由拖动缩放组件.
特点
- 没有依赖包
- 可以拖动 位置 和 大小
- 可以设定大小调整范围
- 可以限制元素只能在父组件内拖动
- 可以自定义网格
- 可以限制元素只能水平 或 竖直拖动
实例
安装 及 使用
$ npm install --save lm-sign-area
注册组件
Vue
使用组件
<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
类型: Boolean
或 Number
必要性: false
默认值: true
定义组件是否可以拖动.
参数值 | 效果 |
---|---|
true | 组件可以在x轴,y轴方向自由拖动 |
false | 组件无法拖动 |
0 | 组件无法拖动 |
1 | 组件可以在x轴,y轴方向自由拖动 |
2 | 组件可以在x轴方向自由拖动 |
3 | 组件可以在y轴方向自由拖动 |
resizable
类型: Boolean
或 Number
必要性: false
默认值: true
定义组件是否可以调整大小.
参数值 | 效果 |
---|---|
true | 组件可以在x轴,y轴方向调整大小 |
false | 组件无法拖动 |
0 | 组件无法拖动 |
1 | 组件可以在x轴,y轴方向调整大小 |
2 | 组件可以在x轴方向调整大小 |
3 | 组件可以在y轴方向调整大小 |
w
类型: Number
必要性: false
默认值: 200
定义组件的初始宽度.
h
类型: Number
必要性: false
默认值: 200
定义组件的初始高度.
minw
类型: Number
必要性: false
默认值: 50
定义组件的最小宽度.
minh
类型: Number
必要性: false
默认值: 50
定义组件的最小高度.
x
类型: Number
必要性: false
默认值: 0
定义组件初始横轴坐标.
y
类型: Number
必要性: false
默认值: 0
定义组件初始纵轴坐标.
grid
类型: Array
必要性: false
默认值: [1,1]
定义组件网格.
restrain
类型: Number
必要性: false
默认值: 0
约束元素宽高只能是restrain的倍数.
parent
类型: Boolean
必要性: false
默认值: false
限制元素只能在父元素内拖动
Events
activated
必要性: false
Parameters: -
组件被初始化事件.
deactivated
必要性: false
Parameters: -
组件被销毁事件.
resizing
必要性: false
Parameters:
left
组件 X 轴坐标top
组件 Y 轴坐标width
组件宽度height
组件高度
组件大小改变事件.
resizestop
必要性: false
Parameters:
left
组件 X 轴坐标top
组件 Y 轴坐标width
组件宽度height
组件高度
组件大小改变结束事件.
dragging
必要性: false
Parameters:
left
组件 X 轴坐标top
组件 Y 轴坐标
组件拖动事件.
dragstop
必要性: false
Parameters:
left
组件 X 轴坐标top
组件 Y 轴坐标
组件拖动结束事件.
keydown
必要性: false
Parameters:
event
键值
按键事件.