1、插件安装
cnpm install --save vue-drag-resize
2、main.js全局引用
import VueDragResize from 'vue-drag-resize'ponent('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，因为这个组件里面属性要求大于0Type: Number || Required: false || Default: 50
minh 最小高度
//注意，不能设置为0，因为这个组件里面属性要求大于0Type: 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 lefttm - Top middletr - Top rightmr - Middle rightbr - Bottom rightbm - Bottom middlebl - Bottom leftml - 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、noneType: 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 componenttop: Number, //the Y position of the componentwidth: Number, //the width of the componentheight: Number //the height of the component}
resizestop 缩放结束
//object 同resizing的objectRequired: false || Parameters: object
dragging 拖拽时事件
//object 同resizing的objectRequired: false || Parameters: object
dragstop 拖拽结束事件
Required: false || Parameters: objectobject 同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" 设置这个属性，禁用点击组件外事件
