vue-drag-resize与输入框/文本框冲突问题
作者：band129
这篇文章主要介绍了vue-drag-resize与输入框/文本框冲突问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue-drag-resize与输入框/文本框冲突
拖拽是前端使用较为频繁的功能了，当我们使用vue-drag-resize插件进行拖拽功能实现时，发现它和输入框或文本框有冲突，输入框/文本框无法输入。
今天主要说怎么去解决该问题。
在测试过程中，发现出现该问题的原因是输入框的焦点事件和拖拽的点击事件冲突了。
找到原因我们就能去解决。
vue-drag-resize插件文档中提供的解决办法
<vue-drag-resize @activated="activateEv(index)" />
activateEv(index) {
console.log('activateEv' + index);
this.$refs['drag-input'].focus();
}插件提供的方法确实可以解决该问题，但是在之后的开发中发现，这针对单个输入框或文本框确实有效，但是**如果一个弹窗内存在多个输入框/文本框时，只有最后一个输入框/文本框有效**，说明问题还是没有得到解决。
解决多输入框/文本框冲突
思路
其实我们看插件提供的方法，就是给输入框/文本框主动的设置焦点事件。那如果我们点击哪个输入框/文本框时才给哪个设置焦点事件不就可以解决问题吗。
针对这个思路，我们进行代码调整。
<detailmove @clicked="clickHandle">
clickHandle(e){
e.target.focus()
}clicked是插件自带的点击事件，当我们点击时，获取当前点击的dom元素，然后设置焦点事件。这样就可以解决了。
当然我们针对的是输入框和文本框，那我们可以加判断去区分。
<detailmove @clicked="clickHandle">
clickHandle(e){
if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
e.target.focus()
}
}这样问题就解决了
vue-drag-resize拖拽组件的简单使用
vue3
npm i -s vue-drag-resize@next
//局部使用
<template>
<div class="home">
<VueDragResize
class="list"
:isActive="true"
:w="width"
:h="height"
:x="left"
:y="top"
:parentLimitation="parentLimitation"
:aspectRatio="aspectRatio"
v-on:resizing="resize"
v-on:dragging="resize"
>
<p>{{ top }} х {{ left }}</p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
// @ is an alias to /src
import VueDragResize from "vue-drag-resize";
export default {
components: {
VueDragResize,
},
name: "HomeView",
data() {
return {
parentLimitation: true, //true不能超过父组件 fallse可以超过父组件
aspectRatio: true, //false不限制宽高比例 true限制宽高比例等比缩放
width: 100,
height: 100,
top: 0,
left: 0,
};
},
methods: {
resize(newRect) {
console.log(newRect);
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
},
},
};
</script>
<style lang="scss" scoped>
.home {
width: 1920px;
height: 1080px;
position: relative;
top: 0;
left: 0;
.list {
position: absolute;
top: 0;
left: 0;
}
}
</style>vue2
npm i -s vue-drag-resize
//局部使用
<template>
<div class="home">
<VueDragResize
class="list"
:isActive="true"
:w="width"
:h="height"
:x="left"
:y="top"
:parentLimitation="parentLimitation"
:aspectRatio="aspectRatio"
v-on:resizing="resize"
v-on:dragging="resize"
>
<p>{{ top }} х {{ left }}</p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
// @ is an alias to /src
import VueDragResize from "vue-drag-resize";
export default {
components: {
VueDragResize,
},
name: "HomeView",
data() {
return {
parentLimitation: true, //true不能超过父组件 fallse可以超过父组件
aspectRatio: true, //false不限制宽高比例 true限制宽高比例等比缩放
width: 100,
height: 100,
top: 0,
left: 0,
};
},
methods: {
resize(newRect) {
console.log(newRect);
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
},
},
};
</script>
<style lang="scss" scoped>
.home {
width: 1920px;
height: 1080px;
position: relative;
top: 0;
left: 0;
.list {
position: absolute;
top: 0;
left: 0;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。