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;
}
});
}
},
},
