vue-drag-resize拖拽Input文本框,但是文本框不能输入内容
时间: 2023-08-01 13:11:28 浏览: 424
这个问题可能是由于拖拽事件和输入事件的冲突导致的。你可以尝试在拖拽事件中阻止输入事件的冒泡,以解决这个问题。
具体的做法是,在 `vue-drag-resize` 的拖拽事件中调用 `event.stopPropagation()` 方法,以阻止输入事件的冒泡。例如:
```html
<vue-drag-resize @dragging="onDragging">
<input type="text" @input="onInput">
</vue-drag-resize>
```
```javascript
export default {
methods: {
onDragging(event) {
event.stopPropagation();
},
onInput(event) {
// 处理输入事件
}
}
}
```
这样就可以在拖拽文本框时防止输入事件的触发,从而避免无法输入内容的问题。
相关问题
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框,Input可拖动可输入内容,点击Input框内容不清空
首先需要安装vue-drag-resize插件,然后在组件中引入并注册该插件。
在模板中,可以使用v-draggable和v-resizable指令来实现拖动和调整大小的功能。同时,需要将Input框的value绑定到data中的一个变量,这样在拖动或调整大小后,输入框的值也会随之改变。
为了实现点击Input框内容不清空的功能,可以在Input的focus事件中将输入框的值备份到另一个变量中,在blur事件中再将备份的值赋回到输入框中。
完整代码如下:
```html
<template>
<div class="container">
<div class="input-box"
v-draggable
v-resizable
:style="{ top: top + 'px', left: left + 'px', width: width + 'px', height: height + 'px' }">
<input type="text"
v-model="inputValue"
@focus="backupValue"
@blur="restoreValue">
</div>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
name: 'DraggableInput',
components: {
VueDragResize,
},
data() {
return {
top: 100,
left: 100,
width: 200,
height: 50,
inputValue: '',
inputBackup: '',
};
},
methods: {
backupValue() {
this.inputBackup = this.inputValue;
},
restoreValue() {
this.inputValue = this.inputBackup;
},
},
};
</script>
<style>
.container {
position: relative;
height: 500px;
background-color: #eee;
}
.input-box {
position: absolute;
background-color: #fff;
border: 1px solid #666;
}
.input-box input {
width: 100%;
height: 100%;
border: none;
outline: none;
padding: 5px;
}
</style>
```
阅读全文
相关推荐














