vue3 使用 vue-drag-resize 时报错

vue-drag-resize的安装

yarn add vue-drag-resize

下面是错误解决方案:

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

vue3 使用 vue-drag-resize 时报错_第1张图片

解决方案:
在引入时加上“/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

方法

例子:

方法 说明 参数类型 参数例子
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.默认样式修改(去掉虚线边框)
拖拽的组件在点击拖拽时,会有一个默认的虚线边框(修改默认样式)
vue3 使用 vue-drag-resize 时报错_第2张图片
第一个问题比较好解决,在网上一搜就能搜到
解决方法:在style标签里写上

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

4.拖拽层级,当前拖拽的元素层级要最大

vue-drag-resize层级默认是第一个元素最小,然后依次递增
虽然说官方文档里有个:z可以手动设置层级,但是实际应用的时候还需要根据点击的元素,动态设置层级

解决方法:使用@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>

vue3 使用 vue-drag-resize 时报错_第3张图片

你可能感兴趣的:(VUE3.x,vue.js,前端,javascript)