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">
		<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、默认样式修改(去掉虚线边框)
拖拽的组件在点击拖拽时,会有一个默认的虚线边框(修改默认样式)
 
第一个问题比较好解决,在网上一搜就能搜到
解决方法:在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,当前元素设置为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>
 
posted @ 2024-08-02 16:59  蓦然JL  阅读(2169)  评论(0编辑  收藏  举报
  1. 1 唯一 G.E.M.邓紫棋
  2. 2 他只是经过 白敬亭 魏大勋
  3. 3 Uptown Funk Mark Ronson / Bruno Mars
  4. 4 在你的身边 盛哲
  5. 5 Edge of My Life Manafest
  6. 6 凄美地 郭顶
  7. 7 Wonderful Tonight Boyce Avenue
  8. 8 心如止水 Ice Paper
  9. 9 Sugar Maroon 5
  10. 10 静谧时光 JIAxNING
  11. 11 Right Now (Na Na Na) Aamir
  12. 12 Dangerously Charlie Puth
  13. 13 Someone You Loved Madilyn Paige
  14. 14 Shape of My Heart Boyce Avenue
  15. 15 We Can't Stop Boyce Avenue / Bea Miller
  16. 16 Perfect Boyce Avenue
  17. 17 Love Me Like You Do Boyce Avenue
  18. 18 Thank You Boyce Avenue
  19. 19 Don’t Wanna Know Boyce Avenue / Sarah Hyland
他只是经过 - 白敬亭 魏大勋
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available

访问主页
关注我
关注微博
私信我
返回顶部

目录导航