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文本框的位置和大小。

相关问题

vue-drag-resize拖拽Input文本框，但是文本框不能输入内容

这个问题可能是由于拖拽事件和输入事件的冲突导致的。你可以尝试在拖拽事件中阻止输入事件的冒泡，以解决这个问题。

具体的做法是，在 `vue-drag-resize` 的拖拽事件中调用 `event.stopPropagation()` 方法，以阻止输入事件的冒泡。例如：

<vue-drag-resize @dragging="onDragging">
  <input type="text" @input="onInput">
</vue-drag-resize>

export default {
  methods: {
    onDragging(event) {
      event.stopPropagation();
    },
    onInput(event) {
      // 处理输入事件
    }
  }
}

这样就可以在拖拽文本框时防止输入事件的触发，从而避免无法输入内容的问题。

vue-drag-resize包裹Input组件，Input框内容输入不了

这个问题可能是由于 `vue-drag-resize` 组件引起的，因为它可能会阻止 `Input` 组件的交互事件。你可以尝试以下方法来解决这个问题：

1. 确保 `vue-drag-resize` 组件的 `prevent-event` 属性被设置为 `false`，以确保它不会阻止 `Input` 组件的事件。

<vue-drag-resize :prevent-event="false">
  <input type="text" />
</vue-drag-resize>

2. 如果你想在 `vue-drag-resize` 组件内部进行拖拽和缩放操作，你可以将 `Input` 组件的 `disabled` 属性设置为 `true`，以防止用户输入。

<vue-drag-resize>
  <input type="text" disabled />
</vue-drag-resize>

这样用户将无法在 `Input` 组件中输入文本，但是你仍然可以通过其他方式设置 `Input` 组件的值。