fullScreen

介绍

根据屏幕分辨率与设定好的分辨率进行自适应的 React HOC 组件

安装方法

$ npm install @cnyballk/full-screen --save
or
$ yarn add @cnyballk/full-screen

使用方法

在组件中引入包

import fullScreen from "@cnyballk/full-screen";

示例

import fullScreen from "@cnyballk/full-screen";
const style = {
  width: 1920,
  height: 1080,
};
const PageA = () => {
  return <div></div>;
};
export default fullScreen({ style })(PageA);

参数

| 参数字段 | 描述 | 是否必选 | 类型 | 默认值 | | --------- | ------------------------------------------------------------------------ | -------- | -------------------------------- | ------------------------ | | className | 全屏组件的根容器类名 | 否 | string | -- | | mode | 0:全屏拉满 1:按宽度自适应 2:按高度自适应 3:自动根据宽高适配模式 1 或 2。 | 否 | number | 0 | | style | 设置缩放分辨率；若传 style 则 style 对象中必须有 width 和 height 属性； | 否 | { width:number height: number} | 默认设置为内容撑开的宽高 |

Props

fullScreeRef

全屏组件的根容器引用

setStyle

允许重新设置分辨率

使用示例

...other code
props.setStyle({
	width:800,
  height:600
})
...other code

setMode

允许重新设置 mode

...other code
props.setMode(1)
...other code

Unfull

当父元素使用 fullScreen 的时候，某个子元素想独立出来，可以使用这个组件进行包裹则可以

示例

https://codesandbox.io/s/distracted-field-szxe9