vue-drag-resize包裹Input之后点击Input内容自动清除了

这个问题可能是由于 `vue-drag-resize` 组件的拖拽事件和 `Input` 组件的点击事件冲突导致的。可以尝试在 `vue-drag-resize` 组件上加上 `@click.stop` 阻止点击事件冒泡，或者在 `Input` 组件上加上 `@click.prevent` 阻止默认点击事件。例如：

<vue-drag-resize @click.stop>
  <Input @click.prevent />
</vue-drag-resize>

如果这种方法不起作用，可以尝试使用 `@mousedown.prevent` 替代 `@click.prevent` 来阻止默认的鼠标按下事件。

相关问题

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组件的值。

vue-drag-resize拖拽Input文本框

可以使用vue-draggable-resizable组件来实现拖拽Input文本框的效果。

首先，你需要安装vue-draggable-resizable组件，可以使用npm命令来安装：

npm install vue-draggable-resizable --save

然后，在你的Vue组件中添加以下代码：

<template>
  <vue-draggable-resizable :w="200" :h="40">
    <input type="text" />
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  }
}
</script>

这里我们创建了一个Vue组件，使用了vue-draggable-resizable组件来包装一个Input文本框，设置了其初始宽度为200px，高度为40px。

接下来，你可以在页面中通过拖拽来调整Input文本框的位置和大小。