Vue3DraggableResizable知识点

Vue3DraggableResizable是一个基于Vue.js 3的组件，用于创建可拖动和可调整大小的元素。以下是一些关键点和示例代码：

1. 安装：

npm install @vue3draggable/resizable

2. 在Vue组件中使用：

<template>
  <div>
    <vue3-draggable-resizable :w="200" :h="200">
      拖动和调整大小
    </vue3-draggable-resizable>
  </div>
</template>
 
<script>
import { Vue3DraggableResizable } from '@vue3draggable/resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 
export default {
  components: {
    Vue3DraggableResizable
  }
}
</script>

3. 属性：

• w - 初始宽度
• h - 初始高度
• x - 初始X坐标
• y - 初始Y坐标
• isDraggable - 是否可拖动
• isResizable - 是否可调整大小

4. 事件：

• @dragging - 拖动时触发
• @resizing - 调整大小时触发
• @dragstop - 停止拖动时触发
• @resizestop - 停止调整大小时触发

5. 方法：

• reset - 重置组件的位置和大小到初始值

6. 使用v-model进行双向绑定：

<template>
  <div>
    <vue3-draggable-resizable v-model="bounds">
      拖动和调整大小
    </vue3-draggable-resizable>
  </div>
</template>
 
<script>
import { Vue3DraggableResizable } from '@vue3draggable/resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 
export default {
  components: {
    Vue3DraggableResizable
  },
  data() {
    return {
      bounds: {
        x: 0,
        y: 0,
        w: 200,
        h: 200
      }
    }
  }
}
</script>

以上是Vue3DraggableResizable组件的一些基本使用方法和代码示例。