vue-drag-resize与输入框/文本框冲突问题
更新时间：2023年04月23日 14:35:10 作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
在本篇文章里小编给大家整理的是关于VUE 项目初建和常见问题以及相关知识点内容，有需要的朋友们学习下。2019-09-09
这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
本篇文章主要介绍了谈谈对vue响应式数据更新的误解，深入了解了vue响应式数据，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2018-04-04
本篇文章主要介绍关于vue-resource报错450的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
vue2.* element tabs tab-pane 动态加载组件操作
这篇文章主要介绍了vue2.* element tabs tab-pane 动态加载组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程,下面这篇文章主要给大家介绍了关于前端Vue项目部署到服务器的全过程以及踩坑记录的相关资料,需要的朋友可以参考下2023-05-05
Vue框架很核心的功能就是双向的数据绑定。下面这篇文章主要给大家介绍了关于Vue.js中数据绑定的语法教程，文中通过示例代码介绍的非常详细，相信对大家具有一的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
今天小编就为大家分享一篇解决vue 项目引入字体图标报错、不显示等问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论