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

vue-drag-resize vue-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>