vue3-draggable-resizable

vue3-draggable-resizable 是基于 Vue3 的一个组件库，主要实现了可拖拽和可缩放的效果。该组件库的使用和配置都非常简单，只需要按照其文档中提供的 API 进行定义和使用即可。

该组件库的主要特点是：

1. 可以拖拽、缩放和进行各种交互。

2. 可以自定义样式和控制器。

3. 提供了事件钩子，可以方便地处理各种事件。

4. 支持触摸屏、鼠标和键盘等多种方式。

该组件库的使用非常灵活，主要分为两步：

1. 安装和引入组件库。

npm install vue3-draggable-resizable

2. 在需要使用的页面中定义组件并传入参数。

<template>
  <draggable-resizable
    v-model="size"
    :w="200"
    :h="200"
    :min-w="100"
    :min-h="100"
  >
    <p>可拖拽、缩放、交互</p>
  </draggable-resizable>
</template>
 
<script>
  import DraggableResizable from 'vue3-draggable-resizable'
 
  export default {
    components: { DraggableResizable },
    data() {
      return {
        size: {
          x: 0,
          y: 0,
          w: 200,
          h: 200
        }
      }
    }
  }
</script>

从上面的代码中我们可以看出，在 template 中定义了一个 draggable-resizable 的组件，并传入了需要的参数。其中，v-model 绑定了 size 对象，将其作为组件的实际大小，并定义了组件的最小大小和初始大小。

在实际开发中，我们可以自定义组件的样式、事件和控制器等，按照自己的需要来进行定义和使用。JSGlobal对象也可以按照该组件库的例子进行自定义拖拽和切换等交互效果。

综上所述，vue3-draggable-resizable 是一个非常实用和灵活的 Vue3 组件库，可以轻松实现拖拽和缩放等常见的交互效果，并且提供了丰富的 API 可以满足各种需求。在实际项目中非常值得使用。