iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue-drag-resize与输入框/文本框冲突问题
  • 188
分享到

vue-drag-resize与输入框/文本框冲突问题

vue-drag-resizevue-drag-resize输入框vue-drag-resize文本框 2023-05-17 08:05:28 188人浏览 八月长安
摘要

目录Vue-drag-resize与输入框/文本框冲突vue-drag-resize插件文档中提供的解决办法解决多输入框/文本框冲突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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue-drag-resize与输入框/文本框冲突问题

本文链接: https://www.lsjlt.com/news/210974.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作