vue-scale-container

支持 vue3 和 vue2 的大屏自适应缩放组件

• 仓库地址：github

安装

npm install vue-scale-container

使用

<template>
  <VueScaleContainer fit="w-full">
    <div></div>
  </VueScaleContainer>
</template>
<script setup>
import VueScaleContainer from 'vue-scale-container'
</script>

Props

| 属性名 | 说明 | 类型 | 默认值 | | ------------------- | ------------------------------------ | ------------- | ------ | | width | 设计图宽度 | Number | 1920 | | height | 设计图高度 | Number | 1080 | | minHeight | 代码自适应最小支持高度, 0 则忽略 | Number | 0 | | maxHeight | 代码自适应最大支持高度, 0 则忽略 | Number | 0 | | fit | 适应类型 | fill / w-full | fill | | forceUpdateOnResize | 是否在 resize 事件强制重新渲染子元素 | Boolean | false |

minHeight、maxHeight

设置 minHeight 和 maxHeight 是为了在此区间内，尽量保证缩放不变形，

• 浏览器不全屏，高度 930px, 代码在高度上利用百分比和间距，适配 930 的屏幕，在 930-1080 的高度上，不变形

• 浏览器为 16:10 的屏幕，高度 1200px, 代码在高度上利用百分比和间距，适配 1200 的屏幕，在 1080-1200 的高度上，比变形

fit 类型

• fill: 充满浏览器全屏，当浏览器宽高比和设计图图宽高比不同时，会出现变形
• w-full: 宽度充满浏览器，高度大于或小于浏览器高度