vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结

在Vue中，vue-draggable-resizable 组件可以用来创建可拖拽和可缩放的元素。以下是一些常用的属性和事件的概述和示例代码：

1. 安装组件：

npm install vue-draggable-resizable --save

2. 引入并注册组件：

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
export default {
  components: {
    VueDraggableResizable
  }
}

3. 使用组件：

<template>
  <vue-draggable-resizable :w="200" :h="200" @resizing="onResize" @dragging="onDrag">
    <!-- 这里是你想要拖拽和缩放的内容 -->
    <div>拖拽我</div>
  </vue-draggable-resizable>
</template>
 
<script>
export default {
  methods: {
    onResize: function (x, y, width, height) {
      console.log('Component resized, new dimensions: ', width, height)
    },
    onDrag: function (x, y) {
      console.log('Component dragged: ', x, y)
    }
  }
}
</script>

常用属性：

• w: 初始宽度
• h: 初始高度
• x: 初始X坐标
• y: 初始Y坐标
• active: 是否激活拖拽和缩放功能

常用事件：

• @resizing: 当组件正在被缩放时触发
• @resized: 当组件缩放结束后触发
• @dragging: 当组件正在被拖动时触发
• @dragged: 当组件拖动结束后触发

以上是使用vue-draggable-resizable组件的基本概述和示例代码。