Vue 使用 vue-drag-resize 实现拖拽和随意缩放大小及安装报错处理

一、vue-drag-resize的安装

yarn add vue-drag-resize

 

下面是错误解决方案：

TypeError: Cannot read properties of undefined (reading ‘_c’)

 

解决方案：

在引入时加上“/src”：

 

import VueDragResize from "vue-drag-resize";
改成
import VueDragResize from "vue-drag-resize/src";

 

属性

属性	说明	类型	是否必须	默认值	说明
isActive	激活状态	Boolean	否	false	处于激活状态的组件才能进行拖拽与缩放等操作，状态呈现激活状态
isDraggable	允许拖拽	Boolean	否	true
isResizable	允许缩放	Boolean	否	true
aspectRatio	允许等比例缩放	Boolean	否	false	设置为true，则会按照元素的元比例缩放。坑：定义了这个属性，发现重新设置宽高的时候出现了异常（新值比例不同于旧值），需要在重设宽高的时候把aspectRatio设置为false，再将其设置回去，才能保证新值的等比例
w	宽度	Number	否	200
h	高度	Number	否	200
minw	最小宽度	Number	否	50	注意不能设置为0，因为这个组件里面属性要求大于0
minh	最小高度	Number	否	50	注意不能设置为0，因为这个组件里面属性要求大于0
x	定位left	Number	否	0
y	定位top	Number	否	0
z	层级	Number	否	auto	注意在元素激活的时候，z会被设置为最高的，所以在管理z的时候要注意
sticks	元素缩放的节点定义	Array	否	[‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]
preventActiveBehavior	单击组件外区域来禁止组件行为	Boolean	否	false	设置这个属性true，就可以解决在其他区域操作返回到组件区域的时候，不需要再次点击就激活组件
parentLimitation	允许超出父级元素	Boolean	否	false	设置为true，则限制操作组件不能超出父级元素
parentW	父级宽度	Number	否	0	该值限制了元素可以拖动的水平最大宽度，前提是parentLimitation=true
parentH	父级高度	Number	否	0	该值限制了元素可以拖动的水平最大高度，前提是parentLimitation=true
parentScaleX	定义初始水平缩放比例	Number	否	1
parentScaleY	定义初始垂直缩放比例	Number	否	1
axis	允许拖拽的方向	String	否	both	取值可以为x、 y、 both、none
dragHandle	定义拖拽时的classname	String	否	无
dragCancel	定义取消拖拽时的classname	String	否	无

 

方法

例子：<vue-drag-resize @clicked="onActivated">

 

方法	说明	参数类型	参数例子
clicked	组件点击事件	组件实例
activated	点击组件事件	无
resizing	缩放时事件	object	{left,top,width,height}
resizestop	缩放结束	object	同resizing一样
dragging	拖拽时事件	object	同resizing一样
dragstop	拖拽结束事件	object	同resizing一样

 

实战案例：

//template模板部分
<template><div class="listBox"><VueDragResizeclass="list":isActive="true":minw="1":minh="1":w="cardData.cardStyle.font2.size * (170 / 13)":h="cardData.cardStyle.font2.size * (20 / 13)":x="cardData.cardStyle.font2.fontX - 15":y="cardData.cardStyle.font2.fontY":isResizable="false"@dragging="draggingFun($event, 'font2')":z="40":parentLimitation="true":aspectRatio="false":parentW="345":parentH="160"><p class="listBox_p" :style="`font-size:${cardData.cardStyle.font2.size}px`">ID:165188888888888999</p></VueDragResize></div>
</template>//JS部分
<script lang="ts">import VueDragResize from "vue-drag-resize/src";export default defineComponent({components: { VueDragResize },})
</script>//CSS部分
<style lang="less" scoped>
.listBox {width: 345px;height: 160px;position: relative;top: 50%;left: 50%;box-shadow: 0px 0px 5px #aaa;transform: translate(-50%, -50%);border-radius: 8px;margin: 10px 15px;.vdr.active:before {display: none;}.list {position: absolute;top: 0;left: 0;.listBox_p {white-space: nowrap;cursor: pointer;}}
}
</style>

 

使用问题

1、怎么修改使点击组件外面后，不需要点击组件才能进行？

 

:preventActiveBehavior="true" 设置这个属性，禁用点击组件外事件

 

2、在拖拽元素里面添加input等类似的表单性元素，无法正常点击操作，特别是focus无法做到，click也是经常失效

 

原因：vue-drag-resize 的设计问题，在元素内部只能触发本元素，如果是有表单元素，只能被动的触发

 

解决方案：

 

<vue-drag-resize @activated="activateEv(index)" />
activateEv(index) {console.log('activateEv' + index);this.$refs['drag-input'].focus();
}

 

3、默认样式修改（去掉虚线边框）

拖拽的组件在点击拖拽时，会有一个默认的虚线边框(修改默认样式)

 

第一个问题比较好解决，在网上一搜就能搜到

解决方法:在style标签里写上

 

.vdr.active:before {display:none;
}

 

4、拖拽层级，当前拖拽的元素层级要最大

 

 

解决方法：使用@clicked事件监听，当点击拖动元素时，可以传入此元素的索引，把此元素的层级设置为最高，其他的设置为最低

 

<template><div class="father" >书包层级{{temp[0]}}手表层级{{temp[1]}}<VueDragResize:w="100" :h="100" :z="temp[0]":x="10" :y="10":parent-limitation="true":is-resizable="false" @clicked="act(0)"@dragging="dragging"><img src="../assets/bag.png" alt="":style="{width:wid+'px'}"></VueDragResize><VueDragResize:w="100" :h="100" :z="temp[1]":x="200" :y="100":parent-limitation="true"@clicked="act(1)"@activated="onActivated"><img src="../assets/watch.png" alt="":style="{width:wid+'px'}"></VueDragResize></div>
</template><script>
import VueDragResize from 'vue-drag-resize'export default {name: 'Drag',data() {return {temp: [0, 0],}},components: {VueDragResize},methods: {//点击事件，传入索引，把所有层级都设置为1，当前元素设置为10act(index) {for(let i=0;i<this.temp.length;i++){this.temp[i]=1}this.temp[index]=10this.$forceUpdate()},}
}
</script><style scoped>
.father {height: 400px;width: 700px;border: 1px solid red;position: relative;margin: 0 auto;
}
.drag{border: 2px solid red;
}
</style>