parent
00f67bc7c6
commit
9237cdc572
@ -0,0 +1,38 @@
|
||||
.page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.iframe {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
height: 300px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.bar {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
cursor: ns-resize;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
color: #000000;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
import styles from './index.less';
|
||||
import { message, Input, Button, Row, Modal, Form, Tabs } from 'antd';
|
||||
import Fetch from '@/utils/fetch';
|
||||
import { useEffect, useState, FC, Fragment, useRef } from 'react';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
const Page = () => {
|
||||
const [data, setData] = useState<any>([]);
|
||||
const resizeBar = useRef<any>(null);
|
||||
const resizeBox = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('message', getData, false);
|
||||
return () => {
|
||||
window.removeEventListener('message', getData, false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getData = (e: any) => {
|
||||
if (e.origin === 'https://edu-xnfz.educoder.net') {
|
||||
const newData = e.data ? JSON.parse(e.data) : [];
|
||||
setData(newData);
|
||||
console.log('111', newData, '222');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (resizeBar.current) {
|
||||
let h = 0;
|
||||
let dragging = false;
|
||||
let startY = 0;
|
||||
function onMouseDown(e: any) {
|
||||
h = resizeBox.current.offsetHeight;
|
||||
console.log(h, 2222);
|
||||
dragging = true;
|
||||
startY = e.pageY;
|
||||
document.onselectstart = function () {
|
||||
return false;
|
||||
};
|
||||
}
|
||||
function onMouseUp() {
|
||||
dragging = false;
|
||||
document.onselectstart = null;
|
||||
}
|
||||
function onMouseMove(e: any) {
|
||||
if (dragging) {
|
||||
let delta = startY - e.pageY;
|
||||
let resizeH = h + delta;
|
||||
if (resizeH < 200) {
|
||||
resizeH = 200;
|
||||
}
|
||||
if (resizeH > window.innerHeight - 130) {
|
||||
resizeH = window.innerHeight - 130;
|
||||
}
|
||||
resizeBox.current.style.height = resizeH + 'px';
|
||||
}
|
||||
}
|
||||
const dom: any = resizeBar.current;
|
||||
dom.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
return () => {
|
||||
const dom: any = resizeBar.current;
|
||||
dom.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
}
|
||||
}, [resizeBar]);
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<iframe
|
||||
className={styles.iframe}
|
||||
src="https://edu-xnfz.educoder.net/Test/Hejidong/SheBeiChuZhuang/index.html"
|
||||
frameBorder={0}
|
||||
></iframe>
|
||||
<div ref={resizeBox} className={styles.wrap}>
|
||||
<div className={styles.bar} ref={resizeBar} draggable={false}>
|
||||
<i className="iconfont icon-guangbiao" draggable={false}></i>
|
||||
</div>
|
||||
<div className={styles.list}></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Page;
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue