238 lines
7.5 KiB
Vue
238 lines
7.5 KiB
Vue
<template>
|
|
<!-- 数小福 -->
|
|
<span id="drag" draggable>
|
|
<iframe
|
|
src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=598318137837933308"
|
|
style="position: absolute; bottom: 10px; right: 0%"
|
|
:height="height"
|
|
:width="width"
|
|
id="child"
|
|
frameborder="0"
|
|
scrolling="0">
|
|
</iframe>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "customerService",
|
|
data() {
|
|
return {
|
|
clientOffset: {},
|
|
drag: null,
|
|
flag: null,
|
|
height: 100,
|
|
width: 100,
|
|
l: 0,
|
|
t: 0,
|
|
x: 0,
|
|
y: 0,
|
|
};
|
|
},
|
|
mounted(){
|
|
this.drag = document.getElementById('drag');
|
|
var iframe = document.getElementById('child');
|
|
iframe.style.pointerEvents = 'none';
|
|
this.drag.addEventListener('mousedown', this.dragDiv, false);
|
|
window.onload = () => {
|
|
let that = this;
|
|
// 弹框显示
|
|
that.drag.onmousedown = function (e) {
|
|
// 获取鼠标点击位置与拖拽元素左上角的偏移
|
|
var disx = e.pageX - that.drag.offsetLeft;
|
|
var disy = e.pageY - that.drag.offsetTop;
|
|
that.clientOffset.clientX = e.clientX;
|
|
that.clientOffset.clientY = e.clientY;
|
|
|
|
// 设置 document.onmousemove 事件处理函数来实现拖拽效果
|
|
document.onmousemove = function (e) {
|
|
that.drag.style.left = e.pageX - disx + 'px';
|
|
that.drag.style.top = e.pageY - disy + 'px';
|
|
};
|
|
|
|
// 设置 document.onmouseup 事件处理函数来结束拖拽
|
|
document.onmouseup = function () {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
};
|
|
that.drag.addEventListener('mouseup', (event) => {
|
|
//鼠标抬起后的事件，判断是拖拽还是点击
|
|
let clientX = event.clientX;
|
|
let clientY = event.clientY;
|
|
if (clientX === that.clientOffset.clientX && clientY === that.clientOffset.clientY) {
|
|
//这里触发点击事件，将click方法移入这里
|
|
document.getElementById('child').contentWindow.postMessage('open', '*');
|
|
window.addEventListener(
|
|
'message',
|
|
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;
|
|
} else {
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
|
|
},
|
|
methods:{
|
|
dragDiv(e) {
|
|
e.preventDefault(); //阻止发生自身事件
|
|
this.flag = true;
|
|
this.x = e.layerX || e.offsetX;
|
|
this.y = e.layerY || e.offsetY;
|
|
document.addEventListener('mousemove', this.docMove, false);
|
|
document.addEventListener('mouseup', this.mouseup, false);
|
|
},
|
|
docMove(e) {
|
|
if (this.flag) {
|
|
e.preventDefault();
|
|
this.l = parseInt(drag.style.left);
|
|
this.t = parseInt(drag.style.top);
|
|
drag.style.left = -this.x + e.pageX + 'px';
|
|
drag.style.top = -this.y + e.pageY + 'px';
|
|
}
|
|
},
|
|
mouseup() {
|
|
this.flag = false;
|
|
window.removeEventListener('mouseup', this.mouseup);
|
|
},
|
|
}
|
|
// 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>
|
|
|
|
<style scoped>
|
|
#drag {
|
|
display: block;
|
|
position: absolute;
|
|
width: 71px;
|
|
text-align: center;
|
|
height: 117px;
|
|
bottom: 36px;
|
|
right: 14px;
|
|
z-index: 9999;
|
|
}
|
|
</style>
|