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

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

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

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

思路

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

針對(duì)這個(gè)思路，我們進(jìn)行代碼調(diào)整。

<detailmove @clicked="clickHandle">

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

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

當(dāng)然我們針對(duì)的是輸入框和文本框，那我們可以加判斷去區(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>