vue的拖拽拉伸插件 vue-drag-resize 类似图怪兽的拖拉拽 获取坐标

下载安装vue-drag-resize

yarn add vue-drag-resize

或

npm install vue-drag-resize

在main.js里面全局引入组件

import VueDragResize from "vue-drag-resize"

Vue.component('vue-drag-resize', VueDragResize)

组件内引入组件

import VueDragResize from "vue-drag-resize";

 components: { VueDragResize }

html部分

<template>
  <div class="music">
    你好
    <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
      <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
      <div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}">
        <img
          src="https://www.apple.com.cn/v/iphone-11/c/images/overview/display/inline_compare_display__fbiiqsjjs0ii_large.jpg"
          style="width: 100%;height: 100%"
        />
      </div>
    </VueDragResize>
    <div>
      <h3>Hello World!</h3>
      <p>{{ vw }} х {{ vh }}</p>
      <p>{{ top }} х {{ left }}</p>
    </div>
  </div>
</template>

js

data() {
    // 这里存放数据
    return {
      vw: 0,
      vh: 0,
      top: 0,
      left: 0,
    };
  },
 created() {
    this.vw = 200 + "px";
    this.vh = 200 + "px";
  },
 methods: {
    resize(newRect) {
      this.vw = newRect.width;
      this.vh = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },

vue-drag-resize 参数介绍

1.isActive 是否激活状态
Type: Boolean || Required: false || Default: false

处于激活状态的组件才能进行拖拽与缩放等操作，状态呈现激活状态

isDraggable 是否允许拖拽
Type: Boolean || Required: false || Default: true

isResizable 是否允许缩放
Type: Boolean || Required: false || Default: true

aspectRatio 是否等比例缩放
Type: Boolean || Required: false || Default: false

w 组件宽度
Type: Number || Required: false || Default: 200

h 组件高度
Type: Number || Required: false || Default: 200

minw 最小宽度
Type: Number || Required: false || Default: 50

minh 最小高度
Type: Number || Required: false || Default: 50

注意， minw minh 不能设置为0，因为这个组件里面属性要求大于0

x 定位left
Type: Number || Required: false || Default: 0

y 定位top
Type: Number || Required: false || Default: 0

z 层级
Type: Number || Required: false || Default: auto

注意在元素激活的时候，z会被设置为最高的，所以在管理z的时候要注意

preventActiveBehavior 单击组件外区域来禁止组件行为
Type: Boolean || Required: false || Default: false

设置这个属性true，就可以解决在其他区域操作返回到组件区域的时候，不需要再次点击就激活组件

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 允许拖拽的方向
Type: String || Required: false || Default: both

取值可以为x、 y、 both、none

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 component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

resizestop 缩放结束
Required: false || Parameters: object

object 同resizing的object

dragging 拖拽时事件
Required: false || Parameters: object

object 同resizing的object

dragstop 拖拽结束事件
Required: false || Parameters: object

object 同resizing的object