vue3引入后报错

[lishihong]

[s17472]

Are you planning to migrate this package to Vue 3?

[smg99]

Looking forward for Vue 3 compatibility

[syd192]

这咋整

[simultsop]

any plans for v3?

[JenuelDev]

I think this actually works on Vue 3. It depends on How you use it.

To use it in vue 3, in your main.js/main.ts

// main.js
// Add the style
// Dont add the component here
import { createApp } from 'vue'
import App from './App.vue'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

createApp(App).mount('#app')

To use the component just call the component from the src instead of taking it from the package.json

<template>
  <div
    style="
      height: 500px;
      width: 500px;
      border: 1px solid red;
      position: relative;
    "
  >
    <vue-draggable-resizable
      :w="100"
      :h="100"
      @dragging="onDrag"
      @resizing="onResize"
      :parent="true"
      :handles="['mr']"
      :draggable="false"
      class-name-handle="right-side-draggablbility"
    >
      <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>
    </vue-draggable-resizable>
  </div>
</template>

<script>
// make sure your getting it in the components folder
import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
import { ref } from "vue";
export default {
  name: "App",
  components: {
    VueDraggableResizable,
  },
  setup() {
    const Width = ref(0);
    const Height = ref(0);
    const X = ref(0);
    const Y = ref(0);

    return {
      Width,
      Height,
      X,
      Y,
      onResize: (x, y, width, height) => {
        X.value = x;
        Y.value = y;
        Width.value = width;
        Height.value = height;
      },
      onDrag: (x, y) => {
        X.value = x;
        Y.value = y;
      },
    };
  },
};
</script>