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

更新時間：2023年04月23日 14:35:10 作者：band129

這篇文章主要介紹了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>