Vue 使用 vue-drag-resize 实现拖拽和随意缩放大小及安装报错处理
一、vue-drag-resize的安装
yarn add vue-drag-resize
下面是错误解决方案:
TypeError: Cannot read properties of undefined (reading ‘_c’)
![](https://img2024.cnblogs.com/blog/2696162/202407/2696162-20240711114813852-1202850365.png)
解决方案:
在引入时加上“/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">
<VueDragResize
class="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、默认样式修改(去掉虚线边框)
拖拽的组件在点击拖拽时,会有一个默认的虚线边框(修改默认样式)
![](https://img2024.cnblogs.com/blog/2696162/202407/2696162-20240711115217015-863485362.png)
第一个问题比较好解决,在网上一搜就能搜到
解决方法:在style标签里写上
.vdr.active:before {
display:none;
}
4、拖拽层级,当前拖拽的元素层级要最大
![](https://img2024.cnblogs.com/blog/2696162/202407/2696162-20240711115248107-2077682228.png)
解决方法:使用@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,当前元素设置为10
act(index) {
for(let i=0;i<this.temp.length;i++){
this.temp[i]=1
}
this.temp[index]=10
this.$forceUpdate()
},
}
}
</script>
<style scoped>
.father {
height: 400px;
width: 700px;
border: 1px solid red;
position: relative;
margin: 0 auto;
}
.drag{
border: 2px solid red;
}
</style>
蓦然、回首,那人就在灯火阑珊处