peng.peng
1 year ago
12 changed files with 220 additions and 144 deletions
@ -0,0 +1,50 @@ |
|||
import React, { useLayoutEffect, forwardRef, useEffect } from 'react'; |
|||
|
|||
import { useAutoResize } from '@jiaminghi/data-view-react'; |
|||
import './style.less' |
|||
const FullScreenContainer = forwardRef(({ |
|||
children, className, style, designWidth = 1920, designHeight = 1080, onlyAutoSize = false, divRef, |
|||
|
|||
}, ref) => { |
|||
const { domRef } = useAutoResize(ref); |
|||
|
|||
useEffect(() => { |
|||
const innerWidth = document.body.clientWidth; |
|||
const innerHeight = document.body.clientHeight; |
|||
const w = document.body.clientWidth / designWidth; |
|||
const h = document.body.clientHeight / designHeight; |
|||
const scale = w < h ? w : h; |
|||
const divRect = divRef?.current?.getBoundingClientRect(); |
|||
if (onlyAutoSize) { |
|||
Object.assign(domRef.current.style, { |
|||
width: `${divRect?.width || 0}px`, |
|||
height: `${divRect?.height || 0}px`, |
|||
// width: '100vw',
|
|||
// height: '100vh',
|
|||
position: 'fixed', |
|||
zIndex: 999, |
|||
top: `${divRect?.top || 0}px`, |
|||
left: `${divRect?.left || 0}px`, |
|||
}); |
|||
} else { |
|||
const isSuperScreen = innerWidth > 3000 && innerHeight >= 976 && innerHeight <= 1080 ? true : false |
|||
Object.assign(domRef.current.style, { |
|||
width: isSuperScreen ? '100vw' : `${designWidth}px`, |
|||
height: isSuperScreen ? '100vh' : `${designHeight}px`, |
|||
}); |
|||
domRef.current.style.transform = `scale(${scale}) translate(-50%, -50%)`; |
|||
} |
|||
}); |
|||
|
|||
return ( |
|||
<div |
|||
className={onlyAutoSize ? 'dv-screen-container' : 'dv-full-screen-container'} |
|||
style={style} |
|||
ref={domRef} |
|||
> |
|||
{children} |
|||
</div> |
|||
); |
|||
}); |
|||
|
|||
export default FullScreenContainer; |
@ -0,0 +1,9 @@ |
|||
.dv-full-screen-container { |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
overflow: hidden; |
|||
transform-origin: left top; |
|||
// padding: 14px 8px 28px 8px; |
|||
transition: 0.3s; |
|||
} |
Loading…
Reference in new issue