vue-drag-resize包裹Input进行拖拽获取多个Input内容

可以使用vue-drag-resize组件包裹多个Input组件，通过拖拽改变组件大小和位置，然后通过计算组件位置和大小来获取每个Input组件的内容。以下是一个简单的示例代码：

<template>
  <vue-drag-resize :w="200" :h="100" :x="10" :y="10" @dragging="onDragging">
    <input v-model="input1" />
  </vue-drag-resize>
  <vue-drag-resize :w="200" :h="100" :x="220" :y="10" @dragging="onDragging">
    <input v-model="input2" />
  </vue-drag-resize>
  <vue-drag-resize :w="200" :h="100" :x="430" :y="10" @dragging="onDragging">
    <input v-model="input3" />
  </vue-drag-resize>
</template>

<script>
import VueDragResize from 'vue-drag-resize'

export default {
  components: {
    VueDragResize
  },
  data() {
    return {
      input1: '',
      input2: '',
      input3: ''
    }
  },
  methods: {
    onDragging(e, { x, y, w, h }) {
      // 计算每个Input组件的位置和大小
      console.log(`Input1: x=${x}, y=${y}, w=${w}, h=${h}, value=${this.input1}`)
      console.log(`Input2: x=${x + 210}, y=${y}, w=${w}, h=${h}, value=${this.input2}`)
      console.log(`Input3: x=${x + 420}, y=${y}, w=${w}, h=${h}, value=${this.input3}`)
    }
  }
}
</script>

在这个示例中，我们使用了vue-drag-resize组件包裹了三个Input组件，并且通过计算每个组件的位置和大小来获取每个Input组件的内容。每当用户拖拽组件时，`onDragging`方法将被调用，并且`x`，`y`，`w`和`h`参数将包含组件的位置和大小。我们可以使用这些参数来计算每个Input组件的位置和大小，并且获取每个Input组件的值。