@sl-theia/full-screen

根据指定的 style 和 mode 自动计算缩放比例，实现大屏自适应效果。

安装

npm install @sl-theia/full-screen

基本用法

作为装饰器/高阶组件使用

import React from "react";
import fullScreen from "@sl-theia/full-screen";

const style = {
  width: 1920,
  height: 1080,
};

// 使用装饰器模式，默认全屏拉满
export default fullScreen({ style })(({ setStyle, setMode }) => {
  return <div>testPage</div>
});

注入的 Props

被 fullScreen 包裹的组件会获得以下 props：

• fullScreeRef: 根元素的引用。
• setStyle: 动态修改设计稿宽高，触发重新计算。
• setMode: 动态修改自适应模式。

参数配置 (fullScreenParmas)

| 参数 | 类型 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | | style | { width: number; height: number } | - | 设计稿的原始宽高 | | mode | number | 0 | 自适应模式：0: 全屏拉满（不保持比例）1: 按宽度自适应（等比）2: 按高度自适应（等比）3: 自动根据宽高适配（等比，取最小值） | | className | string | - | 容器的类名 | | transformOriginCenter | boolean | true | 是否以中心为缩放原点（如果是 false，则从左上角缩放） |

进阶用法

Unfull (反缩放组件)

当你需要在已经缩放的大屏中放置一个“不希望被缩放”的组件（例如弹出框、浮窗）时，可以使用 Unfull 组件。

import { Unfull } from "@sl-theia/full-screen";

const MyComponent = () => {
  return (
    <div>
      <Unfull>
        <div className="modal">我是原始大小，不会随大屏缩放</div>
      </Unfull>
    </div>
  )
}

更新日志

查看 CHANGLELOG.md 了解版本更新详情。