vue-drag-resize拖拽组件的简单使用

vue3

npm i -s vue-drag-resize@next

//局部使用
<template>
  <div class="home">
    <VueDragResize
      class="list"
      :isActive="true"
      :w="width"
      :h="height"
         :x="left"
      :y="top"
      :parentLimitation="parentLimitation"
      :aspectRatio="aspectRatio"
      v-on:resizing="resize"
      v-on:dragging="resize"
    >
      <p>{
         
  { top }} х {
         
  { left }}</p>
      <p>{
         
  { width }} х {
         
  { height }}</p>
    </VueDragResize>
  </div>
</template>

<script>
// @ is an alias to /src
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    VueDragResize,
  },
  name: "HomeView",
  data() {
    return {
      parentLimitation: true, //true不能超过父组件 fallse可以超过父组件
      aspectRatio: true, //false不限制宽高比例 true限制宽高比例等比缩放
      width: 100,
      height: 100,
      top: 0,
      left: 0,
    };
  },
  methods: {
    resize(newRect) {
      console.log(newRect);
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 1920px;
  height: 1080px;
  position: relative;
  top: 0;
  left: 0;
  .list {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

vue2

npm i -s vue-drag-resize
//局部使用
<template>
  <div class="home">
    <VueDragResize
      class="list"
      :isActive="true"
      :w="width"
      :h="height"
         :x="left"
      :y="top"
      :parentLimitation="parentLimitation"
      :aspectRatio="aspectRatio"
      v-on:resizing="resize"
      v-on:dragging="resize"
    >
      <p>{
         
  { top }} х {
         
  { left }}</p>
      <p>{
         
  { width }} х {
         
  { height }}</p>
    </VueDragResize>
  </div>
</template>

<script>
// @ is an alias to /src
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    VueDragResize,
  },
  name: "HomeView",
  data() {
    return {
      parentLimitation: true, //true不能超过父组件 fallse可以超过父组件
      aspectRatio: true, //false不限制宽高比例 true限制宽高比例等比缩放
      width: 100,
      height: 100,
      top: 0,
      left: 0,
    };
  },
  methods: {
    resize(newRect) {
      console.log(newRect);
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 1920px;
  height: 1080px;
  position: relative;
  top: 0;
  left: 0;
  .list {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>