前端开发框架
当前页

大屏组件 ​

@cpit-cpvf/scale-screen ​

大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题）

图例 ​

图例

安装 ​

bash
pnpm install @cpit-cpvf/scale-screen
# or 
yarn add @cpit-cpvf/scale-screen

使用 ​

vue
<script setup lang="ts">
import CpvfScaleScreen from '@cpit-cpvf/scale-screen';
</script>

<template>
  <CpvfScaleScreen>
    <img src="/src/assets/img.png" alt="" />
  </CpvfScaleScreen>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
}
</style>
<route lang="yaml">
meta:
  layout: BlankLayout
</route>

注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden;

API ​

属性说明类型默认值
width大屏宽度number or string1920
height大屏高度number or string1080
autoScale自适应配置，配置为boolean类型时，为启动或者关闭自适应，配置为对象时，若x为true，x轴产生边距，y为true时，y轴产生边距，启用fullScreen时此配置失效boolean or {x:boolean,y:boolean}true
delay窗口变化防抖延迟时间number500
fullScreen全屏自适应，启用此配置项时会存在拉伸效果，同时autoScale失效，非必要情况下不建议开启booleanfalse
boxStyle修改容器样式，如居中展示时侧边背景色，符合Vue双向绑定style标准格式objectnull
wrapperStyle修改自适应区域样式，符合Vue双向绑定style标准格式objectnull