vue-drag-resize与输入框/文本框冲突问题
短信预约 -IT技能 免费直播动态提醒
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 /class="lazy" data-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 /class="lazy" data-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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
