1、拖住时自动伸缩:
提示:要在最外层的盒子设置宽高width: 100%;height: 1080px;
useEffect(() => {
resize();
window.addEventListener("resize", resize);
return () => {
window.removeEventListener("resize", resize);
};
}, []);
function resize() {
const width = 1920,
height = 1080;
const innerWidth = window.innerWidth;
const innerHeight = window.innerHeight;
document.body.style.transform = `scale(${innerWidth / width}, ${
innerHeight / height
})`;
document.body.style.transformOrigin = "left top";
}
2、LazyComponent路由跳转优化,页面跳转的时候加入loading
提示:suspense悬而未决,含糊不定;
{
path: "/",
key: "/",
exact: true,
component: LazyComponent(getResolvePath("enterpriseProfile")),
},
import React from 'react';
import Loading from '@/components/Loading';
const LazyComponent = (resolvePath) => {
const Component = React.lazy(() => import(`@/${resolvePath}`));
return () => {
return (
<React.Suspense fallback={<Loading />}>
<Component />
</React.Suspense>
);
};
};
export default LazyComponent;