VUE+vue-drag-resize实现点位添加拖拽

为了实现VUE+vue-drag-resize实现点位添加拖拽，你可以按照以下步骤进行操作：

1.首先，安装vue-drag-resize组件。你可以使用npm或cnpm进行安装，具体命令如下：

npm i @liaogn/vue-drag-resize-rotate -S

2.在你的Vue项目中引入vue-drag-resize组件。你可以在main.js文件中全局引入，具体代码如下：

import vueDragResizeRotate from '@liaogn/vue-drag-resize-rotate'
Vue.use(vueDragResizeRotate)

3.在你的Vue组件中使用vue-drag-resize组件。你可以在template中添加vue-drag-resize标签，并设置相应的属性，例如位置、大小、最小/最大宽度和高度等。具体代码如下：

<vue-drag-resize :w="100" :h="100" :x="0" :y="0" :minw="50" :minh="50">
  <!-- 这里是你要添加的点位内容 -->
</vue-drag-resize>

4.如果你需要添加多个点位，你可以使用v-for指令来循环渲染vue-drag-resize组件。具体代码如下：

<template>
  <div>
    <vue-drag-resize v-for="(item, index) in pointList" :key="index" :w="item.width" :h="item.height" :x="item.x" :y="item.y" :minw="50" :minh="50">
      <!-- 这里是你要添加的点位内容 -->
    </vue-drag-resize>
  </div>
</template>

5.在Vue组件中，你可以使用data属性来存储点位列表。你可以在mounted钩子函数中初始化点位列表，并在vue-drag-resize的drag-end和resize-end事件中更新点位列表。具体代码如下：

export default {
  data() {
    return {
      pointList: [
        { x: 0, y: 0, width: 100, height: 100 },
        { x: 200, y: 200, width: 150, height: 150 }
      ]
    }
  },
  mounted() {
    // 初始化点位列表
    // ...
  },
  methods: {
    handleDragEnd(index, { x, y }) {
      // 更新点位列表
      this.pointList[index].x = x
      this.pointList[index].y = y
    },
    handleResizeEnd(index, { width, height }) {
      // 更新点位列表
      this.pointList[index].width = width
      this.pointList[index].height = height
    }
 }
}

详情完整项目代码请见：VUE+vue-drag-resize +canvas 实现的点位添加拖拽