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项目搭建以及全家桶的使用详细教程(小结)

    这篇文章主要介绍了vue项目搭建以及全家桶的使用详细教程(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue项目适配大屏端的方法示例

    vue项目适配大屏端的方法示例

    众所周知在vue移动端h5页面当中,适配是经常会遇到的问题,这篇文章主要给大家介绍了关于vue项目适配大屏端的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue记住滚动条和实现下拉加载的完美方法

    Vue记住滚动条和实现下拉加载的完美方法

    这篇文章主要给大家介绍了关于Vue记住滚动条和实现下拉加载的完美方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • vue+element upload上传带参数的实例

    vue+element upload上传带参数的实例

    这篇文章主要介绍了vue+element upload上传带参数的实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue antd的from表单中验证rules中type的坑记录

    vue antd的from表单中验证rules中type的坑记录

    这篇文章主要介绍了vue antd的from表单中验证rules中type的坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue3 路由配置与导航实战教程

    Vue3 路由配置与导航实战教程

    Vue Router 提供了强大的路由管理能力,帮助开发者轻松构建流畅、高效的单页应用,本文将带你深入探讨 Vue3 中的路由配置与导航操作,从安装到实战,手把手教你掌握 Vue Router 的使用技巧,需要的朋友可以参考下
    2025-03-03
  • Vue请求后端接口导出excel表格方式

    Vue请求后端接口导出excel表格方式

    这篇文章主要介绍了Vue请求后端接口导出excel表格方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3的路由传参方法超全汇总

    Vue3的路由传参方法超全汇总

    vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue3路由传参方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vuex Store 数据在页面刷新后丢失的解决方法

    Vuex Store 数据在页面刷新后丢失的解决方法

    当我们使用 Vue.js 和 Vuex 进行状态管理时,一个常见的问题是页面刷新会导致 Vuex store 中的数据丢失,本文将详细介绍解决 Vuex Store 数据在页面刷新后丢失的方法,感兴趣的朋友一起看看吧
    2024-08-08
  • vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

    vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve

    这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论