背景：一个拖拽的页面，左侧是被拖动的模块，右侧是放置，模块的容器，每个模块是一个子组件，在容器这个父组件里循环展示，
需求：由于每个模块要设置不同宽高，所以我在每个子组件里设置了宽高然后使用this.$emit修改父组件的值，我现在设置了其中两个模块的宽高
问题：但是现在没有进行动态的更改，好像默认是B的宽高，在第一次拖动A时，要拖动两遍才是我设置A的宽高，然后无论拖动A还是B都是对的宽高；然而无论第几次在拖动B时，就是B的正确宽高
父组件
<grid-layout :layout.sync="ViewPC" :col-num="12" :row-height="62" :is-resizable="false" :is-draggable="true"
:responsive="true" :vertical-compact="true" :use-css-transforms="true" ref="gridlayout">
<grid-item v-for="(item, index) in ViewPC" :key="index" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
:i="item.i" @resize="resizeEvent" @move="moveEvent" @resized="resizedEvent" @moved="movedEvent">
<div v-if="index > 0" :key="index" :data-index="index"
:class="{item: true, active: currentIndex === index }" @click="selectType(index)" style="height: 100%;">
<template v-if="item.status && item.status === 2">
<div class="wait">{{ item.type }}
</template>
<template v-
else>
<component :is=
"typeList[item.type]['com']" :data=
"item" @getmsg=
"getmsg" :msg=
"msg" />
</template>
<span
class=
"span-error" @click=
"deleteItem($event, index)">
<i
class=
"el-icon-delete del-css" />
</grid-item>
</grid-layout>
msg: {
w:
1,
h:
1
},
let mouseXY = {
"x": null,
"y": null
};
let DragPos = {
"x": null,
"y": null,
"w": null,
"h":null,
"i": null
};
drag:
function(e) {
this.
type = e.target.dataset.
type
let parentRect = document.get
ElementById('content').get
BoundingClientRect();
let mouseInGrid =
false;
if (((mouseXY.x > parentRect.left)
&& (mouseXY.x < parentRect.right))
&& ((mouseXY.y > parentRect.top)
&& (
mouseXY.y < parentRect.bottom))) {
mouseInGrid =
true;
}
if (mouseInGrid
=== true && (this.
ViewPC.find
Index(item => item.i === 'drop'))
=== -
1) {
console.log('s.
ViewPC.push')
this.
ViewPC.push({
x: (this.
ViewPC.length
* 2) % (this.colNum
|| 12),
y: this.
ViewPC.length + (this.colNum
|| 12),
w: this.msg.w,
h: this.msg.h,
type: this.
type,
options: {},
data:
[],
status:
1,
i: 'drop',
});
}
let index = this.
ViewPC.find
Index(item => item.i === 'drop');
if (index !== -
1) {
console.log('!== -
1')
try {
console.log('none')
this.$refs.gridlayout.$children
[this.ViewPC.length].$refs.item.style.display =
"none";
} catch {}
let el = this.$refs.gridlayout.$children
[index];
el.dragging = {
"top": mouseXY.y - parentRect.top,
"left": mouseXY.x - parentRect.left
};
let new_pos = el.calc
XY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
if (mouseInGrid
=== true) {
this.$refs.gridlayout.drag
Event('dragstart', 'drop', new_pos.x, new_pos.y, this.msg.w, this.msg.h);
DragPos.i =
String(index);
DragPos.x = this.ViewPC
[index].x;
DragPos.y = this.ViewPC
[index].y;
DragPos.w = this.ViewPC
[index].w;
DragPos.h = this.ViewPC
[index].h;
}
if (mouseInGrid
=== false) {
this.$refs.gridlayout.drag
Event('dragend', 'drop', new_pos.x, new_pos.y, this.msg.w, this.msg.h);
this.ViewPC = this.
ViewPC.filter(obj => obj.i !== 'drop');
}
}
},
dragend:
function(e) {
let parentRect = document.get
ElementById('content').get
BoundingClientRect();
let mouseInGrid =
false;
if (((mouseXY.x > parentRect.left)
&& (mouseXY.x < parentRect.right))
&& ((mouseXY.y > parentRect.top)
&& (
mouseXY.y < parentRect.bottom))) {
mouseInGrid =
true;
}
if (mouseInGrid
=== true) {
this.$refs.gridlayout.drag
Event('dragend', 'drop', DragPos.x, DragPos.y, DragPos.w, DragPos.h);
this.ViewPC = this.
ViewPC.filter(obj => obj.i !== 'drop');
这里新增模块
this.
ViewPC.push({
x:
DragPos.x,
y:
DragPos.y,
w:
DragPos.w,
h:
DragPos.h,
i:
Number(DragPos.i),
type: this.
type,
options: {},
data:
[],
status:
1,
});
try {
this.$refs.gridlayout.$children
[this.ViewPC.length].$refs.item.style.display =
"block";
console.log('block',this.$refs.gridlayout)
} catch {
}
this.isPush =
false
this.
type = null
DragPos.w=null
DragPos.h=null
console.log('DragPos', DragPos)
}
},
子组件A
export default {
name: 'Banner',
props: ['data', 'msg'],
data(){
return{
}
},
watch:{
msg(newVal, oldVal) {
console.log('banner',newVal, oldVal)
if(JSON.stringify(newVal) !== JSON.stringify(oldVal))
this.$emit("update:getmsg", newVal);
},
},
mounted() {
const that=this
that.msg['w']=4.2
that.msg['h']=6
}
}
子组件B
export default {
name: 'Layout',
props: ['data', 'msg'],
data(){
return{
}
},
watch:{
msg(newVal, oldVal) {
console.log('Layout',newVal, oldVal)
if(JSON.stringify(newVal) !== JSON.stringify(oldVal))
this.$emit("update:getmsg", newVal);
},
},
mounted() {
const that=this
that.msg['w']=12
that.msg['h']=3
}
}
