vue-drag-resize與輸入框/文本框沖突問題怎么解決

這篇“vue-drag-resize與輸入框/文本框沖突問題怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue-drag-resize與輸入框/文本框沖突問題怎么解決”文章吧。

vue-drag-resize與輸入框/文本框沖突

拖拽是前端使用較為頻繁的功能了，當(dāng)我們使用vue-drag-resize插件進行拖拽功能實現(xiàn)時，發(fā)現(xiàn)它和輸入框或文本框有沖突，輸入框/文本框無法輸入。

今天主要說怎么去解決該問題。

在測試過程中，發(fā)現(xiàn)出現(xiàn)該問題的原因是輸入框的焦點事件和拖拽的點擊事件沖突了。

找到原因我們就能去解決。

vue-drag-resize插件文檔中提供的解決辦法

<vue-drag-resize @activated="activateEv(index)" />

activateEv(index) {
    console.log('activateEv' + index);
    this.$refs['drag-input'].focus();
}

插件提供的方法確實可以解決該問題，但是在之后的開發(fā)中發(fā)現(xiàn)，這針對單個輸入框或文本框確實有效，但是**如果一個彈窗內(nèi)存在多個輸入框/文本框時，只有最后一個輸入框/文本框有效**，說明問題還是沒有得到解決。

解決多輸入框/文本框沖突

思路

其實我們看插件提供的方法，就是給輸入框/文本框主動的設(shè)置焦點事件。那如果我們點擊哪個輸入框/文本框時才給哪個設(shè)置焦點事件不就可以解決問題嗎。

針對這個思路，我們進行代碼調(diào)整。

<detailmove @clicked="clickHandle">

clickHandle(e){
    e.target.focus()
}

clicked是插件自帶的點擊事件，當(dāng)我們點擊時，獲取當(dāng)前點擊的dom元素，然后設(shè)置焦點事件。這樣就可以解決了。

當(dāng)然我們針對的是輸入框和文本框，那我們可以加判斷去區(qū)分。

<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>

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