vue-scale-container v0.0.20

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

minHeight、maxHeight

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

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

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

fit 类型

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