1、插件安装
cnpm install --save vue-drag-resize
2、main.js全局引用
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)
3、.vue页面使用
<template>
<div>
<div class="manbox">
<vue-drag-resize
v-for="(rect, index) in rects"
:key="index"
:w="rect.width"
:h="rect.height"
:x="rect.left"
:y="rect.top"
:parentW="listWidth"
:parentH="listHeight"
:axis="rect.axis"
:isActive="rect.active"
:minw="rect.minw"
:minh="rect.minh"
:isDraggable="rect.draggable"
:isResizable="rect.resizable"
:parentLimitation="rect.parentLim"
:snapToGrid="rect.snapToGrid"
:aspectRatio="rect.aspectRatio"
:z="rect.zIndex"
:contentClass="rect.class"
v-on:activated="activateEv(index)"
v-on:deactivated="deactivateEv(index)"
v-on:dragging="changePosition($event, index)"
v-on:resizing="changeSize($event, index)"
>
<img src="../../img/bg_zf.png" height="100%" width="100%" />
</vue-drag-resize>
</div>
</div>
</template>
<script>
/*
isActive:是否是激活状态
isDraggable:是否等比例缩放
isResizable :是否允许缩放
isDraggable:是否等比例缩放
aspectRatio 是否等比例缩放
parentLimitation 是否超出父级元素
axis 允许拖拽的方向
*/
// 局部引用
// import VueDragResize from 'vue-drag-resize';
export default {
name: 'printDesign',
components: {
// VueDragResize
},
data() {
return {
listWidth: 0,
listHeight: 0,
rects: [{
'width': 200,
'height': 150,
'top': 10,
'left': 10,
'draggable': true,
'resizable': true,
'minw': 100,
'minh': 100,
'axis': 'both',
'parentLim': true,
'snapToGrid': false,
'aspectRatio': false,
'zIndex': 1,
'color': '#EF9A9A',
'active': false
},
]
}
},
methods: {
activateEv(index) {
console.log(index)
// this.$store.dispatch('rect/setActive', {id: index});
},
// 当前缩放的元素索引
deactivateEv(index) {
console.log(index)
// this.$store.dispatch('rect/unsetActive', {id: index});
},
// 拖动的位置
changePosition(newRect, index) {
console.log(newRect,index)
// this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
// this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
// this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
// this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});
},
// 改变拉伸的大小
changeSize(newRect, index) {
console.log(newRect,index)
// this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
// this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
// this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
// this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});
}
}
}
</script>
<style lang="less" scoped>
.vdr.active:before {
outline: none
}
.manbox {
width: 400px;
height: 300px;
border: 1px solid red;
position: relative;
}
</style>
属性
isActive 是否激活状态
//处于激活状态的组件才能进行拖拽与缩放等操作,状态呈现激活状态
Type: Boolean || Required: false || Default: false
isDraggable 是否允许拖拽
Type: Boolean || Required: false || Default: true
isResizable 是否允许缩放
Type: Boolean || Required: false || Default: true
w 组件宽度
Type: Number || Required: false || Default: 200
h 组件高度
Type: Number || Required: false || Default: 200
minw 最小宽度
//注意,不能设置为0,因为这个组件里面属性要求大于0
Type: Number || Required: false || Default: 50
minh 最小高度
//注意,不能设置为0,因为这个组件里面属性要求大于0
Type: Number || Required: false || Default: 50
x 定位left
Type: Number || Required: false || Default: 0
y 定位top
Type: Number || Required: false || Default: 0
z 层级
//注意在元素激活的时候,z会被设置为最高的,所以在管理z的时候要注意
Type: Number || Required: false || Default: auto
sticks 元素缩放的节点定义
Type: Array || Required: false || Default: ['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
preventActiveBehavior 单击组件外区域来禁止组件行为
//设置这个属性true,就可以解决在其他区域操作返回到组件区域的时候,不需要再次点击就激活组件
Type: Boolean || Required: false || Default: false
parentLimitation 是否超出父级元素
Type: Boolean || Required: false || Default: false
//设置为true,则限制操作组件不能超出父级元素
parentW 父级宽度
Type: Number || Required: false || Default: 0
//该值限制了元素可以拖动的水平最大宽度,前提是parentLimitation=true
parentH 父级高度
Type: Number || Required: false || Default: 0
//该值限制了元素可以拖动的水平最大高度,前提是parentLimitation=true
parentScaleX
Type: Number || Required: false || Default: 1
parentScaleY
Type: Number || Required: false || Default: 1
axis 允许拖拽的方向,
//取值可以为x、 y、 both、none
Type: String || Required: false || Default: both
dragHandle 定义拖拽时的classname
Type: String || Required: false
dragCancel 定义取消拖拽时的classname
Type: String || Required: false
事件
clicked 组件点击事件
Required: false || Parameters: 组件实例
activated 点击组件外事件
Required: false || Parameters: 无
resizing 缩放时事件
Required: false || 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
}
resizestop 缩放结束
//object 同resizing的object
Required: false || Parameters: object
dragging 拖拽时事件
//object 同resizing的object
Required: false || Parameters: object
dragstop 拖拽结束事件
Required: false || Parameters: object
object 同resizing的object
issues
在拖拽元素里面添加input等类似的表单性元素,无法正常点击操作,特别是focus无法做到,click也是经常失效
//vue-drag-resize 的设计问题,在元素内部只能触发本元素,如果是有表单元素,只能被动的触发;解决:
<vue-drag-resize @activated="activateEv(index)" />
activateEv(index) {
console.log('activateEv' + index);
this.$refs['drag-input'].focus();
}
怎么修改使点击组件外面后,不需要点击组件才能进行?
:preventActiveBehavior="true" 设置这个属性,禁用点击组件外事件