vue3项目中使用vue-draggable-resizable-gorkys报错

vue yekong

vue3项目中使用vue-draggable-resizable-gorkys会报错需要调整一下

修改

import vdr from "vue-draggable-resizable-gorkys"
 修改为
import vdr from "vue-draggable-resizable-gorkys/src/components/vue-draggable-resizable.vue"
<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
        X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vdr>
    <vdr
        :w="200"
        :h="200"
        :parent="true"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="20"
    >
    </vdr>
  </div>
</template>

<script>
import vdr from "vue-draggable-resizable-gorkys/src/components/vue-draggable-resizable.vue"
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
  components: {vdr},
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>
喜欢