vue大屏适配缩放组件
npm i vue-auto-scale -S
or
yarn add vue-auto-scale
使用时需要将页面中单位全部换成px 百分比不受影响
<template>
<vue-auto-scale
:width="1920"
:height="1080"
:delay="100"
:scale-type="scaleType"
:reverse-scaling-ids="['div2']"
>
<!-- 被缩放的元素-->
<div class="my-demo">
<!-- 不想被缩放的元素比如地图等 当然这个也可以写在 vue-auto-scale 标签外面-->
<div id="div2"></div>
</div>
</vue-auto-scale>
</template>
<script setup>
import VueAutoScale from "vue-auto-scale";
</script>
-
width
宽度(设计搞宽度) 默认1920
-
height
高度(设计稿高度) 默认1080
-
delay
自适应缩放防抖延迟时间(ms) 默认100
-
scaleType
缩放类型1
: 强制铺满2
: 按比例缩放3
: 适应宽度4
: 适应高度 默认值1
-
reverse-scaling-ids
不被缩放的元素id 可以为数组或者字符串 默认为null