watch: {
comList: {
handler(val) {
this
.getCom(val);
// 模块列表改变时,实时加载组件
},
deep:
true
,
immediate:
true
,
// 声明了之后会立马执行handler里面的函数
},
transType(val) {
// 悬浮模块加载组件
if
(val) {
this
.transCom = () => import(`./
default
/${val}`);
}
},
scrollTop: {
// 监听页面滚动
handler() {},
immediate:
true
,
},
comType(newVal) {
if
(newVal) {
this
.comList.forEach((item, index) => {
if
(item === newVal) {
this
.comList[index] =
'moveBox'
;
// 将组建列表中为comType的元素改为moveBox组件
}
});
this
.getCom(
this
.comList);
}
},
downFlag(newVal) {
// 鼠标已经点击
const nowThis =
this
;
document.onmousemove =
function
(e) {
if
(newVal) {
// 鼠标移动赋值
nowThis.coordinate.mouseX = e.clientX;
nowThis.coordinate.mouseY = e.clientY;
}
};
document.onmouseup =
function
() {
// 鼠标松开
document.onmousemove =
null
;
if
(newVal) {
nowThis.transType =
''
;
// 悬浮组件置空
nowThis.comList.forEach((item, index) => {
if
(item ===
'moveBox'
) {
// 寻找moveBox所在位置
nowThis.comList[index] = nowThis.comType;
// 还原成点击组件
}
});
nowThis.downFlag =
false
;
nowThis.comType =
''
;
nowThis.getCom(nowThis.comList);
}
};
},
coordinate: {
handler(newVal) {
// 悬浮组件位置
this
.$refs.translateBox.style.top = `${newVal.mouseY +
this
.scrollTop - 40 -
this
.compBox.y}px`;
this
.$refs.translateBox.style.left = `${newVal.mouseX -
this
.compBox.x - 200}px`;
this
.mouseYLast = newVal.mouseY;
},
deep:
true
,
},
mouseYLast(newVal) {
// 鼠标移动Y坐标
this
.forFlage =
false
;
if
(newVal -
this
.mouseYBefore > 30) {
// 移动30鼠标向下移,每移动30,moveBox移动一次
this
.comList.forEach((item, index) => {
if
(item ===
'moveBox'
&& index <
this
.comLen - 1 && !
this
.forFlage) {
this
.nowCom =
this
.comList[index + 1];
this
.$set(
this
.comList, index + 1,
'moveBox'
);
this
.$set(
this
.comList, index,
this
.nowCom);
this
.mouseYBefore = newVal;
this
.forFlage =
true
;
}
});
}
else
if
(newVal -
this
.mouseYBefore < -30) {
// 鼠标向上移
this
.comList.forEach((item, index) => {
if
(item ===
'moveBox'
&& index > 0 && !
this
.forFlage) {
this
.nowCom =
this
.comList[index - 1];
// this.comList[index - 1] = 'moveBox';
// this.comList[index] = this.nowCom;
// this.comList[index]数组中采用这种方式赋值,vue是不能检测到数组的变动的
this
.$set(
this
.comList, index - 1,
'moveBox'
);
this
.$set(
this
.comList, index,
this
.nowCom);
this
.mouseYBefore = newVal;
this
.forFlage =
true
;
}
});
}
},
},