FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数小福3.1

Browse Source
This commit is contained in:
zyn
2023-08-25 15:52:58 +08:00
parent cf9c62d751
commit 1cbc46c0ba
1 changed files with 192 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/customerService.vue
+192 -105
View File
@@ -2,12 +2,13 @@
<!-- 数小福 --> <!-- 数小福 -->
<span id="drag" draggable> <span id="drag" draggable>
<iframe <iframe
class="box" src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080"
style="position: absolute; bottom: 10px; right: 0%"
:height="height"
:width="width"
id="child" id="child"
scrolling="no"
frameborder="0" frameborder="0"
style="pointer-events: none" scrolling="0">
src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080">
</iframe> </iframe>
</span> </span>
</template> </template>
@@ -15,117 +16,210 @@
<script> <script>
export default { export default {
name: "customerService", name: "customerService",
mounted() { data() {
this.kefu() return {
clientOffset: {},
drag: null,
flag: null,
height: 100,
width: 100,
l: 0,
t: 0,
x: 0,
y: 0,
};
}, },
methods: { mounted(){
kefu () { this.drag = document.getElementById('drag');
let clientOffset = {}; var iframe = document.getElementById('child');
var drag = document.getElementById("drag"), iframe.style.pointerEvents = 'none';
flag; this.drag.addEventListener('mousedown', this.dragDiv, false);
drag.addEventListener("mousedown", dragDiv, false); window.onload = () => {
function dragDiv(e) { let that = this;
e.preventDefault(); //阻止发生自身事件
flag = true;
var x = e.layerX || e.offsetX;
var y = e.layerY || e.offsetY;
document.addEventListener("mousemove", docMove, false);
document.addEventListener("mouseup", mouseup, false);
function docMove(e) {
if (flag) {
e.preventDefault;
var l = parseInt(drag.style.left);
var t = parseInt(drag.style.top);
drag.style.left = -x + e.pageX + "px";
drag.style.top = -y + e.pageY + "px";
}
}
}
function mouseup() {
flag = false;
window.removeEventListener("mouseup", mouseup);
}
// 弹框显示 // 弹框显示
drag.onmousedown = function (e) { that.drag.onmousedown = function (e) {
var disx = e.pageX - drag.offsetLeft; // 获取鼠标点击位置与拖拽元素左上角的偏移
var disy = e.pageY - drag.offsetTop; var disx = e.pageX - that.drag.offsetLeft;
clientOffset.clientX = event.clientX; var disy = e.pageY - that.drag.offsetTop;
clientOffset.clientY = event.clientY; that.clientOffset.clientX = e.clientX;
// 解决点击后图标偏移 start (1/3) that.clientOffset.clientY = e.clientY;
drag.style.left = e.pageX - disx + "px";
drag.style.top = e.pageY - disy + "px"; // 设置 document.onmousemove 事件处理函数来实现拖拽效果
// 解决点击后图标偏移 end
document.onmousemove = function (e) { document.onmousemove = function (e) {
drag.style.left = e.pageX - disx + "px"; that.drag.style.left = e.pageX - disx + 'px';
drag.style.top = e.pageY - disy + "px"; that.drag.style.top = e.pageY - disy + 'px';
}; };
// 设置 document.onmouseup 事件处理函数来结束拖拽
document.onmouseup = function () { document.onmouseup = function () {
document.onmousemove = document.onmouseup = null; document.onmousemove = null;
document.onmouseup = null;
}; };
}; };
drag.addEventListener("mouseup", (event) => { that.drag.addEventListener('mouseup', (event) => {
//鼠标抬起后的事件，判断是拖拽还是点击 //鼠标抬起后的事件，判断是拖拽还是点击
let clientX = event.clientX; let clientX = event.clientX;
let clientY = event.clientY; let clientY = event.clientY;
if ( if (clientX === that.clientOffset.clientX && clientY === that.clientOffset.clientY) {
clientX === clientOffset.clientX &&
clientY === clientOffset.clientY
) {
//这里触发点击事件，将click方法移入这里 //这里触发点击事件，将click方法移入这里
console.log(1212); document.getElementById('child').contentWindow.postMessage('open', '*');
document window.addEventListener(
.getElementById("child") 'message',
.contentWindow.postMessage("open", "*"); function (e) {
if (e.data === 'open') {
that.height = 470;
that.width = 510;
iframe.style.pointerEvents = 'auto';
} else if (e.data == 'close') {
that.height = 100;
that.width = 100;
iframe.style.pointerEvents = 'none';
}
},
false
);
return; return;
} else { } else {
return; return;
} }
}); });
var iframe = document.getElementById("child"); };
var styles = drag.style; },
window.onload = () => { Method:{
// 父级页面接收消息 dragDiv(e) {
var _this = this; e.preventDefault(); //阻止发生自身事件
window.addEventListener( this.flag = true;
"message", this.x = e.layerX || e.offsetX;
function (e) { this.y = e.layerY || e.offsetY;
console.log("父级页面接收消息", e); document.addEventListener('mousemove', this.docMove, false);
if (e.data === "open") { document.addEventListener('mouseup', this.mouseup, false);
iframe.setAttribute("height", "470"); },
iframe.setAttribute("width", "510"); docMove(e) {
if (this.flag) {
styles.height = "470px"; e.preventDefault();
styles.width = "580px"; this.l = parseInt(drag.style.left);
this.t = parseInt(drag.style.top);
// 解决点击后图标偏移 start (2/3) drag.style.left = -this.x + e.pageX + 'px';
styles.left = (styles.left.slice(0,styles.left.indexOf('px')) - 509) + 'px' drag.style.top = -this.y + e.pageY + 'px';
styles.top = (styles.top.slice(0,styles.top.indexOf('px')) - 470 + 99) + 'px' }
// 解决点击后图标偏移 end },
mouseup() {
iframe.style.pointerEvents = ""; this.flag = false;
} else if (e.data == "close") { window.removeEventListener('mouseup', this.mouseup);
iframe.setAttribute("height", "100");
iframe.setAttribute("width", "100");
styles.height = "99px";
styles.width = "71px";
// 解决点击后图标偏移 start (3/3)
styles.left = (styles.left.slice(0,styles.left.indexOf('px')) / 1 + 509) + 'px'
styles.top = (styles.top.slice(0,styles.top.indexOf('px')) / 1 + 470 - 99) + 'px'
// 解决点击后图标偏移 end
iframe.style.pointerEvents = "none";
}
},
false
);
};
}, },
} }
// mounted() {
// this.kefu()
// },
// methods: {
// kefu () {
// let clientOffset = {};
// var drag = document.getElementById("drag"),
// flag;
// drag.addEventListener("mousedown", dragDiv, false);
// function dragDiv(e) {
// e.preventDefault(); //阻止发生自身事件
// flag = true;
// var x = e.layerX || e.offsetX;
// var y = e.layerY || e.offsetY;
// document.addEventListener("mousemove", docMove, false);
// document.addEventListener("mouseup", mouseup, false);
// function docMove(e) {
// if (flag) {
// e.preventDefault;
// var l = parseInt(drag.style.left);
// var t = parseInt(drag.style.top);
// drag.style.left = -x + e.pageX + "px";
// drag.style.top = -y + e.pageY + "px";
// }
// }
// }
//
// function mouseup() {
// flag = false;
// window.removeEventListener("mouseup", mouseup);
// }
//
// // 弹框显示
// drag.onmousedown = function (e) {
// var disx = e.pageX - drag.offsetLeft;
// var disy = e.pageY - drag.offsetTop;
// clientOffset.clientX = event.clientX;
// clientOffset.clientY = event.clientY;
// // 解决点击后图标偏移 start (1/3)
// drag.style.left = e.pageX - disx + "px";
// drag.style.top = e.pageY - disy + "px";
// // 解决点击后图标偏移 end
// document.onmousemove = function (e) {
// drag.style.left = e.pageX - disx + "px";
// drag.style.top = e.pageY - disy + "px";
// };
// document.onmouseup = function () {
// document.onmousemove = document.onmouseup = null;
// };
// };
// drag.addEventListener("mouseup", (event) => {
// //鼠标抬起后的事件，判断是拖拽还是点击
// let clientX = event.clientX;
// let clientY = event.clientY;
// if (
// clientX === clientOffset.clientX &&
// clientY === clientOffset.clientY
// ) {
// //这里触发点击事件，将click方法移入这里
// console.log(1212);
// document
// .getElementById("child")
// .contentWindow.postMessage("open", "*");
// return;
// } else {
// return;
// }
// });
// var iframe = document.getElementById("child");
//
// var styles = drag.style;
// window.onload = () => {
// // 父级页面接收消息
// var _this = this;
// window.addEventListener(
// "message",
// function (e) {
// console.log("父级页面接收消息", e);
// if (e.data === "open") {
// iframe.setAttribute("height", "470");
// iframe.setAttribute("width", "510");
//
// styles.height = "470px";
// styles.width = "580px";
//
// // 解决点击后图标偏移 start (2/3)
// styles.left = (styles.left.slice(0,styles.left.indexOf('px')) - 509) + 'px'
// styles.top = (styles.top.slice(0,styles.top.indexOf('px')) - 470 + 99) + 'px'
// // 解决点击后图标偏移 end
//
// iframe.style.pointerEvents = "";
// } else if (e.data == "close") {
// iframe.setAttribute("height", "100");
// iframe.setAttribute("width", "100");
//
// styles.height = "99px";
// styles.width = "71px";
//
// // 解决点击后图标偏移 start (3/3)
// styles.left = (styles.left.slice(0,styles.left.indexOf('px')) / 1 + 509) + 'px'
// styles.top = (styles.top.slice(0,styles.top.indexOf('px')) / 1 + 470 - 99) + 'px'
// // 解决点击后图标偏移 end
//
// iframe.style.pointerEvents = "none";
// }
// },
// false
// );
// };
// },
// }
} }
</script> </script>
@@ -135,15 +229,8 @@ export default {
position: absolute; position: absolute;
width: 71px; width: 71px;
text-align: center; text-align: center;
height: 99px; height: 117px;
bottom: 78px; bottom: 36px;
right: 14px; right: 14px;
z-index: 1000;
}
.box {
position: absolute;
bottom: 0px;
right: 0px;
} }
</style> </style>