vue-drag-resize包裹Input组件,Input框内容输入不了
时间: 2023-08-01 08:11:28 浏览: 62
这个问题可能是由于 `vue-drag-resize` 组件引起的,因为它可能会阻止 `Input` 组件的交互事件。你可以尝试以下方法来解决这个问题:
1. 确保 `vue-drag-resize` 组件的 `prevent-event` 属性被设置为 `false`,以确保它不会阻止 `Input` 组件的事件。
```html
<vue-drag-resize :prevent-event="false">
<input type="text" />
</vue-drag-resize>
```
2. 如果你想在 `vue-drag-resize` 组件内部进行拖拽和缩放操作,你可以将 `Input` 组件的 `disabled` 属性设置为 `true`,以防止用户输入。
```html
<vue-drag-resize>
<input type="text" disabled />
</vue-drag-resize>
```
这样用户将无法在 `Input` 组件中输入文本,但是你仍然可以通过其他方式设置 `Input` 组件的值。
相关问题
vue-drag-resize包裹Input框点击之后内容清除了
这个问题可能是由于 vue-drag-resize 组件的点击事件与 Input 框的点击事件相互冲突导致的。你可以尝试在 Input 上添加 @click.stop 来停止事件冒泡,或者在 vue-drag-resize 组件上添加 @mousedown.stop 来阻止鼠标按下事件的冒泡,从而解决这个问题。具体代码示例如下:
```html
<vue-drag-resize @mousedown.stop>
<input type="text" @click.stop />
</vue-drag-resize>
```
另外,你也可以尝试使用其他的拖拽组件,比如 vue-draggable-resizable,看看是否存在相同的问题。
vue-drag-resize包裹Input之后点击Input内容自动清除了
这个问题可能是由于 `vue-drag-resize` 组件的拖拽事件和 `Input` 组件的点击事件冲突导致的。可以尝试在 `vue-drag-resize` 组件上加上 `@click.stop` 阻止点击事件冒泡,或者在 `Input` 组件上加上 `@click.prevent` 阻止默认点击事件。例如:
```html
<vue-drag-resize @click.stop>
<Input @click.prevent />
</vue-drag-resize>
```
如果这种方法不起作用,可以尝试使用 `@mousedown.prevent` 替代 `@click.prevent` 来阻止默认的鼠标按下事件。