vue-draggable-resizable vue3.x

Vue-draggable-resizable是一个用于Vue.js的可拖拽和可调整大小的组件库。它允许您在Vue应用程序中创建可拖拽和可调整大小的元素。

在Vue3.x中，您可以通过全局引入或局部引入来使用vue-draggable-resizable组件。

1. 全局引入：
在main.js文件中，您可以通过以下方式全局引入vue-draggable-resizable组件：

import { createApp } from 'vue';
import App from './App.vue';
import Vue3DraggableResizable from 'vue3-draggable-resizable';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';

createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app');

这样，您就可以在整个应用程序中使用Vue3DraggableResizable组件。

2. 局部引入：
在组件中，您可以通过以下方式局部引入vue-draggable-resizable组件：

<template>
  <div>
    <Vue3DraggableResizable :resizable="true" :draggable="true">
      <!-- 在此处放置您的内容 -->
    </Vue3DraggableResizable>
  </div>
</template>

<script>
import { DraggableContainer } from 'vue3-draggable-resizable';
import Vue3DraggableResizable from 'vue3-draggable-resizable';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';

export default {
  components: {
    Vue3DraggableResizable,
    DraggableContainer,
  },
};
</script>

<style>
/* 在此处添加样式 */
</style>

这样，您就可以在该组件中使用Vue3DraggableResizable组件。