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>

以上就是關于“vue-drag-resize與輸入框/文本框沖突問題怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。